We have tried to do a checkout on our website but its not working. When looking into the console, it says the below error
Uncaught TypeError: Cannot read property 'innerHTML' of null
and its pointing the below line
jQuery(".menus > ul").before("<div class=\"barshw\"><a class=\"iconsclick\" onclick=\"show(this)\"><i class=\"fa fa-bars hideicon\" aria-hidden=\"true\"></i></a></div><div class=\"contentbody\"><div class=\"contentmenu\" onclick=\"stop_propogate(event)\"><div class=\"itm\">"+document.querySelector('.menu-container .menus').innerHTML+"</div>");
when comment this line, we can do checkout.
Now how can resolve this error without commenting this line. Because if i comment the line, other functionality(megamenu) is not working.
Below is the full code in script file:
define([
"jquery",
"lgsign"
],
function ($, lgsign) {
// Use the conventional $ prefix for variables that hold jQuery objects.
var $slider2;
// If the only purpose of the windowWidth() function is to set the slide variables,
// it can be renamed and rewritten to supply the full configuration object instead.
function buildSliderConfiguration2() {
// When possible, you should cache calls to jQuery functions to improve performance.
var windowWidth = $(window).width();
var numberOfVisibleSlides;
if (windowWidth < 420) {
numberOfVisibleSlides = 1;
}
else if (windowWidth < 768) {
numberOfVisibleSlides = 1;
}
else if (windowWidth < 1200) {
numberOfVisibleSlides = 3;
}
else {
numberOfVisibleSlides = 3;
}
return {
pager: true,
controls: false,
auto: true,
slideWidth: 5000,
startSlide: 0,
nextText: ' ',
prevText: ' ',
adaptiveHeight: true,
moveSlides: 1,
slideMargin: 20,
minSlides: numberOfVisibleSlides,
maxSlides: numberOfVisibleSlides
};
}
// This function can be called either to initialize the slider for the first time
// or to reload the slider when its size changes.
function configureSlider2() {
var config = buildSliderConfiguration2();
if ($slider2 && $slider2.reloadSlider) {
// If the slider has already been initialized, reload it.
$slider2.reloadSlider(config);
}
else {
// Otherwise, initialize the slider.
$slider2 = $('.explore-slider').bxSlider(config);
}
}
$('.slider-prev').click(function () {
var current = $slider2.getCurrentSlide();
$slider2.goToPrevSlide(current) - 1;
});
$('.slider-next').click(function () {
var current = $slider2.getCurrentSlide();
$slider2.goToNextSlide(current) + 1;
});
// Configure the slider every time its size changes.
$(window).on("orientationchange resize", configureSlider2);
// Configure the slider once on page load.
configureSlider2();
// Use the conventional $ prefix for variables that hold jQuery objects.
var $slider1;
// If the only purpose of the windowWidth() function is to set the slide variables,
// it can be renamed and rewritten to supply the full configuration object instead.
function buildSliderConfiguration1() {
// When possible, you should cache calls to jQuery functions to improve performance.
var windowWidth = $(window).width();
var numberOfVisibleSlides;
if (windowWidth < 420) {
numberOfVisibleSlides = 1;
}
else if (windowWidth < 768) {
numberOfVisibleSlides = 1;
}
else if (windowWidth < 1200) {
numberOfVisibleSlides = 1;
}
else {
numberOfVisibleSlides = 1;
}
return {
pager: true,
controls: false,
auto: true,
slideWidth: 5000,
startSlide: 0,
nextText: ' ',
prevText: ' ',
adaptiveHeight: true,
moveSlides: 1,
slideMargin: 20,
minSlides: numberOfVisibleSlides,
maxSlides: numberOfVisibleSlides
};
}
// This function can be called either to initialize the slider for the first time
// or to reload the slider when its size changes.
function configureSlider1() {
var config = buildSliderConfiguration1();
if ($slider1 && $slider1.reloadSlider) {
// If the slider has already been initialized, reload it.
$slider1.reloadSlider(config);
}
else {
// Otherwise, initialize the slider.
$slider1 = $('.washing-slider').bxSlider(config);
}
}
$('.slider-prev').click(function () {
var current = $slider1.getCurrentSlide();
$slider1.goToPrevSlide(current) - 1;
});
$('.slider-next').click(function () {
var current = $slider1.getCurrentSlide();
$slider1.goToNextSlide(current) + 1;
});
// Configure the slider every time its size changes.
$(window).on("orientationchange resize", configureSlider1);
// Configure the slider once on page load.
configureSlider1();
/** menu tab footer script**/
jQuery(document).ready(function(){
jQuery(".menu").click(function(){
jQuery(".navbar").toggle();
});
jQuery(".footer-arrow").click(function(){
jQuery(".footer-bottom-innr").toggle();
});
jQuery(".tab-cl").click(function(){
var clid=jQuery(this).attr("id");
var id=clid.split("-");
jQuery(".offer-tab-con").hide();
jQuery(".tab-cl").removeClass("active");
jQuery("#tabcon-"+id[1]).show();
jQuery("#cl-"+id[1]).addClass("active");
});
});
/*** toggle nav **/
/***** Home page tab ****/
jQuery('#tabs li a').click(function(){
var t = jQuery(this).attr('id');
if(jQuery(this).hasClass('inactive')){ //this is the start of our condition
jQuery('#tabs li a').addClass('inactive');
jQuery(this).removeClass('inactive');
jQuery('.container').hide();
jQuery('#'+ t + 'C').fadeIn('slow');
}
});
/*** Acton Calculator ****/
jQuery(".arrow").click(function(){
jQuery(".action-calculator-body").toggleClass("calculator-full");
jQuery(".arrow-close").css({'z-index':'99','display':'block'});
jQuery(".arrow").hide();
});
jQuery(".arrow-close").click(function(){
jQuery(".action-calculator-body").toggleClass("calculator-full");
jQuery(".arrow").show();
jQuery(".arrow-close").hide();
});
/**** Compare product ****/
jQuery(document).ready(function(){
jQuery(".collaps-all").click(function(){
jQuery(".sub-catagory-outer").toggle();
});
jQuery(".catagory-main-title").click(function(){
jQuery(".sub-catagory-outer").toggle();
jQuery(this).toggleClass("arrow-open");
});
/* jQuery(".arrow").click(function(){
jQuery(".action-calculator-body").toggleClass("calculator-full");
}); */
});
jQuery('body').on('click','.sub-catagory-title',function(){
jQuery(this).closest('table').toggleClass('hidden-area');
})
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
//>=, not <=
if (scroll >= 300) {
//clearHeader, not clearheader - caps H
jQuery(".compare-pro-list").addClass("com-fixed");
jQuery(".fixed-com-print").addClass("com-fixed");
jQuery(".compare-item-info").addClass("com-fixed");
}else if(scroll < 300) {
//clearHeader, not clearheader - caps H
jQuery(".compare-pro-list").removeClass("com-fixed");
jQuery(".fixed-com-print").removeClass("com-fixed");
jQuery(".compare-item-info").removeClass("com-fixed");
}
});
jQuery(document).ready(function() {
"use strict";
jQuery('.itm > ul > li:has( > ul)').addClass('menu-dropdown-icon');
jQuery('.itm > ul > li > ul:not(:has(ul))').addClass('normal-sub');
jQuery(".menus > ul").before("<div class=\"barshw\"><a class=\"iconsclick\" onclick=\"show(this)\"><i class=\"fa fa-bars hideicon\" aria-hidden=\"true\"></i></a></div><div class=\"contentbody\"><div class=\"contentmenu\" onclick=\"stop_propogate(event)\"><div class=\"itm\">"+document.querySelector('.menu-container .menus').innerHTML+"</div>");
jQuery('.contentmenu ul li:has( > ul)').each(function(){
if(jQuery(this).find('a i').length == 0){
jQuery(this).find('a')[0].insertAdjacentHTML('beforeend', '<i class="fa fa-angle-down" aria-hidden="true"></i>');
}
});
document.querySelectorAll('.contentmenu .u_cat_image').forEach(function(e_im){
e_im.closest('li').remove();
});
jQuery(".menus > ul > li").hover(function(e) {
if (jQuery(window).width() > 943) {
var el = e.target.tagName.toLowerCase() == 'li' ? e.target : e.target.closest('li');
if(el.querySelector('ul li') != undefined){
jQuery(this).children("ul").stop(true, false).fadeToggle(150);
setTimeout(function(){
var el = e.target.tagName.toLowerCase() == 'li' ? e.target : e.target.closest('li');
var sty = el.querySelector('ul').style.display;
if(sty == 'block'){
el.querySelectorAll('.menus > ul > li > ul').forEach(function(se){
se.style.display = 'flex';
});
}
}, 160);
e.preventDefault();
}
}
});
jQuery("li:has( > ul)").each(function(){
if(jQuery(this).find('i').length > 0){
jQuery(this).find('i')[0].addEventListener('click', function(ev){
if (jQuery(window).width() <= 943) {
ev.preventDefault();
ev.stopPropagation();
jQuery(ev.target).closest('li').children("ul").fadeToggle(150);
}
})
}
});
document.querySelector('.contentmenu').style.left = - (document.querySelector('.contentmenu').clientWidth + 300) + 'px';
});
jQuery(window).resize(function() {
jQuery(".itm > ul > li").children("ul").hide();
jQuery(".itm > ul").removeClass('show-on-mobile');
});
// jQuery(function(){
// jQuery(".menus > ul > li > ul").css('height','auto');
// });
});
function show(e){
var att = e.getAttribute('active');
if(att == undefined || att == "false"){
e.setAttribute('active', 'true');
document.querySelector('.contentmenu').style.left = "26px";
setTimeout(function(){
document.querySelector('body').addEventListener('click', close_menu);
}, 100);
}else{
e.setAttribute('active', 'false');
document.querySelector('body').removeEventListener('click', close_menu);
document.querySelector('.contentmenu').style.left = - (document.querySelector('.contentmenu').clientWidth + 120) + 'px';
}
}
function close_menu(){
document.querySelector('.iconsclick').click();
}
function stop_propogate(ev){
ev.stopPropagation();
}
Any help will be appreciated.
