(function IIFE() {
'use strict';
var buttons = document.getElementsByTagName('button');
for (let i = 0, l = buttons.length; i <= l; i += 1) {
buttons[i].onclick = function () {
for (let i = 0; i <= l; i += 1) {
buttons[i].className = '';
this.className = 'active';
}
};
}
// just for testing purpose
for (var k = 0; k <= 10; k +=1){
alert(k);
}
}());<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test UI</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<ul>
<li><button class="active">A</button></li>
<li><button>B</button></li>
<li><button>C</button></li>
</ul>
<script src="script.js"></script>
</body>
</html> 
我想知道为什么alert() 没有完成工作。 我之前不知道会出现故障，因为它按预期工作。
现在我想知道为什么buttons[i]未定义？
代码是用ES6编写的。
感谢您的帮助
最佳答案
Now I am wondering why is buttons[i] undefined?
因为你的条件是i <= l当 i变成l ，然后buttons[i]变成undefined - 记住索引从 0 开始。
演示
(function IIFE() {
'use strict';
var buttons = document.getElementsByTagName('button');
for (let i = 0, l = buttons.length; i < l; i += 1) {
buttons[i].onclick = function () {
for (let i = 0; i < l; i += 1) {
buttons[i].className = '';
this.className = 'active';
}
};
}
// just for testing purpose
for (var k = 0; k <= 10; k +=1){
alert(k);
}
}());<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test UI</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<ul>
<li><button class="active">A</button></li>
<li><button>B</button></li>
<li><button>C</button></li>
</ul>
<script src="script.js"></script>
</body>
</html>关于JavaScript；未捕获的类型错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47432089/