Question

(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（）没有做好工作。我不知道之前有过失败，因为它的运作方式与预期的一样。

现在我想知道为什么按钮[i]未定义？

代码是用ES6编写的。

感谢您的帮助

Answer 1

现在我想知道为什么按钮[i]未定义？

由于您的条件为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的;未捕获的TypeError

1 个答案: