在JavaScript中使用'for'循环内的'if'语句

Question

这是我正在使用的代码：

var valueArray = new Array();
var i;

for(i=0; i<=3; i++) {
  valueArray[i] = 0;
}

for(i=0; i<=3; i++) {
  document.getElementById("div" + i).onclick=function() {
    
    console.log(i); 
    /* The problem is that 'i' always has a value of 4. I don't know how to fix this. */
    
    if(valueArray[i]===0) {
      alert("hi");
    }
  };
}

<div id="div0" class="box">X</div>
<div id="div1" class="box">X</div>
<div id="div2" class="box">X</div>
<div id="div3" class="box">X</div>

基本上应该发生的是，当我点击任何div时，如果数组中的相应值等于零，则警告框应该打开并显示“hi”。

因此，如果我点击div0，而valueArray [0]等于0，则会弹出警告框。

同样当我点击div1并且valueArray [1]等于0，或者当我点击div2并且valueArray [2]等于0时，依此类推。

重要的是

• 这需要在用户点击div
时发生
• div的相应valueArray应该等于零
• 这需要在HTML，CSS和JavaScript中完成，因为我不了解jQuery和其他东西。

据我所知，发生的事情是'for'循环完成它的事情，然后在最后，'i'的值被卡在四。每当我点击一个div时，它使用i = 4.但我不知道如何解决这个问题。