Question

我正在使用在线教程并尝试理解下面的代码。我没有得到的是为什么这个工作超过两次。循环执行两次i == len时，条件i < len不再为真。那么为什么有可能将不同的分词切换两次以上呢？

我的猜测是当条件为假时i再次设置为0，我是否理解正确？希望有人可以帮助我，我没有在网上找到这个特殊问题的解释。

HTML

 <button>Normal</button>
 <button>Changed</button>

CSS

.normal {background-color: white;color:black;}
.changed {background-color: black;color:white;}

的JavaScript

(function() {
var buttons = document.getElementsByTagName("button");

for (var i = 0, len = buttons.length; i < len; i +=1)
  buttons[i].onclick = function() {
    var className = this.innerHTML.toLowerCase();
    document.body.className = className;
 }}
}());

Answer 1

for循环仅被激活一次，并遍历所有按钮。在for循环体中，为每个按钮定义onclick函数。

因此，在您可以单击循环已经完成的任何位置之前，并在每个按钮上添加onclick函数（每次都会调用），然后单击该按钮。

使用button[i].onclick = function() {...}，您可以向按钮单击事件添加事件处理函数。

您应该阅读有关event handlers的更多信息。

用于循环事件

1 个答案: