JavaScript For 循环不返回任何内容（未运行）？

Question

好的，我在我的 EJS 页面上的脚本标签中有这个 for 循环。 当前代码如下所示：

<script async>
    var removeCartItemButtons = document.getElementsByClassName('btn-danger')
    console.log(removeCartItemButtons)
    var i;
    for (i = 0; i < removeCartItemButtons.length; i++){
        console.log('elem')
        var button = removeCartItemButtons[i]
        button.addEventListener('click', function() {
            console.log('clicked')
        })
    }
</script>

removeCartItemButtons 的 console.log 工作，但 console.log('elem') 不运行。 我的 cmd 和开发人员工具中都没有错误。 我在不同的论坛上在线查看，发现人们对我做类似的事情并且他们的工作很好。

我已经尝试了多种方法，另外需要注意的是，这是在 html 文件中而不是外部文件。

这个 for 循环的最终目标是遍历每个类为 'btn-danger' 的元素，并在它们被点击时记录。 任何帮助都会很棒！

Answer 1

尝试在控制台中运行 document.getElementsByClassName('btn-danger') 。

附加提示：js 中有一个 for of 循环

检查这个： https : //developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...of基本上：

for(let button of removeCartItemButtons) {
     button.addListener
}

Answer 2

我在 Codepen 中尝试了这段代码，它奏效了。 我重写了您的代码，但从技术上讲，只是使用了不同的语法。 脚本标签中的“异步”可能会导致问题，我不确定。

var buttons = document.querySelectorAll('.btn-danger');
[...buttons].forEach(button => {
  console.log('elem')
  button.addEventListener('click', function() {
    console.log('clicked')
  })
})

Answer 3

您的 HTML 代码肯定有问题。 运行下面的代码片段，它工作正常

 var removeCartItemButtons = document.getElementsByClassName('btn-danger') console.log(removeCartItemButtons) var i; for (i = 0; i < removeCartItemButtons.length; i++) { console.log('elem') var button = removeCartItemButtons[i] button.addEventListener('click', function() { console.log('clicked'); alert('clicked'); }) }

 <button class='btn-danger'>Button</button> <br/> <button class='btn-danger'>Button</button> <br/> <button class='btn-danger'>Button</button> <br/> <button class='btn-danger'>Button</button>

Answer 4

removeCartItemButtons.length为 0，因为当代码片段运行时，DOM 未完全加载。

删除async并将您的脚本放在 html 的末尾。

另一种选择是使用像onload这样的 EventListener 来确保您的按钮在更改之前存在。