0

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.

0

Try to use $(".menu-container .menus").get(0) instead of document.querySelector('.menu-container .menus') if you have Jquery already defined And also check if this element exists

  • Still, it says error: TypeError: document.querySelector(...) is null – Siva Nov 5 at 16:10
  • As i know there is no menu in default Luma theme on checkout page – LayZee Nov 5 at 17:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.