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

-1

我有几个HTML页面都链接到相同的JavaScript文件（其中包含一些IIFE函数）。其中一个功能控制只在一个页面上的某个按钮。但由于其他HTML文件连接到同一个JS文件，在他们的网页，我得到的控制台错误：单独HTML页面上的JavaScript null属性错误

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 [slideIndex-1] .style.display =“block”;

我已经试过把'如果x存在，然后做以上'，但这似乎并没有做任何事情。

来源

2017-12-27 mts396

，请复制粘贴的内容作为引用文本的错误，而不是它的图像。 –

请检查slideIndex的值和x的长度 –

导致错误的行前添加此行：

if(x[slideIndex - 1])

来检查，如果你想获得的元素存在。检查数组是否存在将在您的情况下没有效果，因为该数组存在。你想知道元素是否在其中。

来源

2017-12-27 12:50:53

这是解决方案，谢谢@Stefan Octavian。 – mts396

您需要通过函数引用而不是函数调用

的结果总结现有left和right的addEventListener的一个函数

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

来源

2017-12-27 12:54:17 gurvinder372

是的，有道理，但这不是问题 – mts396

@ mts396真的吗？你能分享一个工作片段来展示使用'<>'这个问题吗？ – gurvinder372

对不起@ gurvinder372，我的意思是你包含的代码是正确的，它的工作原理，但这不是我遇到的问题的问题。对我来说，问题在于不包含该元素（x）的HTML文件在引用相同的JS文件时显示错误。所以我想知道如何避免这种情况。我可以添加一个JSFiddle，但这意味着我必须放入单独的HTML文件来证明问题。 – mts396

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

回答

相关问题