代码之家  ›  专栏  ›  技术社区  ›  mts396

单独HTML页上的JavaScript null属性错误

  •  -1
  • mts396  · 技术社区  · 7 年前

    我有几个HTML页面都链接到同一个JavaScript文件(其中包含许多IIFE函数)。 其中一个功能控制仅在一页上的某个按钮。但由于其他HTML文件连接到同一个JS文件,因此在它们的页面上,我得到控制台错误:

    Error Message

    Uncaught TypeError: Cannot read property 'style' of undefined
    at showDivs (scripts.js:99)
    at scripts.js:82
    at scripts.js:108
    

    那么,我应该如何处理该函数,以便仅当它检测到元素时,才应用该样式?

    (function(){
    
    let left = document.getElementById("left");
    let right = document.getElementById("right");
    
    var slideIndex = 1;
    showDivs(slideIndex);
    
    function plusDivs(n) {
      showDivs(slideIndex += n);
    }
    
    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      if (n > x.length) {slideIndex = 1}    
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      x[slideIndex-1].style.display = "block";  
    };
    
    
    left.addEventListener("click", plusDivs(-1));
    right.addEventListener("click", plusDivs(1));
    
    })();
    

    错误位于以下行:x[幻灯片索引-1]。风格显示=“块”;

    我已经试着输入“如果x存在,那么做上面的”,但这似乎没有任何作用。

    2 回复  |  直到 4 年前
        1
  •  2
  •   Stefan Octavian    7 年前

    在导致错误的行之前添加此行:

    if(x[slideIndex - 1])
    

    检查您试图获取的元素是否存在。检查数组是否存在对您的情况没有影响,因为数组存在。您想知道元素是否在其中。

        2
  •  0
  •   gurvinder372    7 年前

    你需要通过 函数引用 而不是 函数调用的结果

    包装现有的 left right addEventListener 在函数中

    left.addEventListener("click", function(){ plusDivs(-1) });
    right.addEventListener("click", function(){ plusDivs(1) } );