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>