單獨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屬性錯誤

回答

相關問題