Question

JavaScript；未捕获的类型错误

2017-11-22

33

javascript

(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 编写的。

谢谢你的帮助

Answer 1

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>