JavaScript - 非常簡單的代碼，但功能尚未定義

Question

我環顧了一段時間（可能花了一個小時搜索），但我找不到明確的答案。據我所知，我沒有使用jQuery或AJAX，只使用普通的JavaScript。下面是它的樣子：

var i; 
 

 
var displayimg = document.getElementsById("displayimg"); // I'm not sure what I'm doing here. I thought that the onclick event might be in the wrong scope, so I tried setting it from JavaScript instead. It didn't work. 
 
var imgb = document.getElementsByClassName("imgb"); 
 
for (i = 0; i < imgb.length; i += 1) { 
 
    imgb[i].addEventListener("click", setSlide(i)); 
 
    console.log("successful"); 
 
} 
 

 
var maxIndex; 
 
var minIndex; 
 

 
function startSlide(max, min) { // this function comes from the html body onload. 
 
    "use strict"; 
 
    maxIndex = max; 
 
    minIndex = min; 
 
    showSlide(1); 
 
} 
 

 
function setSlide(n) { // this function comes from the .imgb buttons. 
 
    "use strict"; 
 
    showSlide(n); 
 
    console.log("OK"); 
 
} 
 

 
function showSlide(n) { 
 
    "use strict"; 
 
    if (n > maxIndex) { 
 
     n = minIndex; 
 
    } // if number exceeds 3, go back to 1 (top) 
 
    if (n < minIndex) { 
 
     n = maxIndex; 
 
    } // if number deceeds 1, go back to 3 (bottom) 
 
    for (i = 0; i < imgb.length; i += 1) { // loops through all imgb 
 
     imgb[i].className = imgb[i].className.replace(" active", ""); // removes active class from all imgb 
 
    } 
 
    document.getElementsById("displayimg").style["background-image"] = "url('pre".concat(i, ".png')"); 
 
    imgb[n - 1].className += " active"; 
 
    console.log("slide updated"); 
 
}

<div id="displayimg" style="background-image:url('pre1.png');"></div> 
 
<div style="text-align:center;"> 
 
    <span class="imgb"></span> 
 
    <span class="imgb"></span> 
 
    <span class="imgb"></span> 
 
</div>

我可能會搞砸了劇本，我看了很多教程和答案的SO和那種只是搗碎他們在一起，希望它會工作。當我嘗試通過JSLint運行它時，以及每個「for」循環都出乎意料，似乎反覆出現的問題就是「超出範圍」。 這個問題已經打破了我。每當我嘗試新的解決方案時，我都覺得自己陷入了一系列未解決的問題中。請，任何幫助表示讚賞。

Answer 1

您已寫入.getElementsById()，但正確的名稱是.getElementById()而您的click回調函數沒有被正確定義 - - 您擁有它的方式，函數將立即被調用。它需要被包裝在另一個功能中。

另外，不要在多個回調中使用相同的循環計數器（i），因爲將會形成一個閉包，這將導致在多個函數執行中共享i的問題。

除此之外，通常最好不要使用getElementsByClassName()，而應該使用.querySelectorAll()，因爲前者會返回一個「活動節點列表」，它比後者更耗費資源。此外，如果將由.querySelectorAll()返回的節點列表轉換爲數組，則可以利用Array.forEach()方法，該方法允許您循環訪問數組而不需要循環計數器。

var displayimg = document.getElementById("displayimg"); 
 

 
// If we turn the node list returned here into a proper Array, we don't need a loop counter 
 
var imgb = Array.prototype.slice.call(document.querySelectorAll(".imgb")); 
 

 
imgb.forEach(function(el, idx){ 
 
    el.addEventListener("click", function(){ 
 
     setSlide(idx); 
 
    }); 
 
    console.log("successful"); 
 
}); 
 

 
var maxIndex; 
 
var minIndex; 
 

 
function startSlide(max, min) { // this function comes from the html body onload. 
 
    "use strict"; 
 
    maxIndex = max; 
 
    minIndex = min; 
 
    showSlide(1); 
 
} 
 

 
function setSlide(n) { // this function comes from the .imgb buttons. 
 
    "use strict"; 
 
    showSlide(n); 
 
    console.log("OK"); 
 
} 
 

 
function showSlide(n) { 
 
    "use strict"; 
 
    if (n > maxIndex) { 
 
     n = minIndex; 
 
    } // if number exceeds 3, go back to 1 (top) 
 
    if (n < minIndex) { 
 
     n = maxIndex; 
 
    } // if number deceeds 1, go back to 3 (bottom) 
 
    imgb.forEach(function(el, idx){ // loops through all imgb 
 
     el.className = el.classList.remove("active"); // removes active class from all imgb 
 
    }); 
 
    document.getElementById("displayimg").style["background-image"] = "url('pre".concat(i, ".png')"); 
 
    imgb[n - 1].className += " active"; 
 
    console.log("slide updated"); 
 
}

<div id="displayimg" style="background-image:url('pre1.png');"></div> 
 
<div style="text-align:center;"> 
 
    <span class="imgb"></span> 
 
    <span class="imgb"></span> 
 
    <span class="imgb"></span> 
 
</div>