javascript - 在javascript中迭代直到达到button.length是什么意思？

Question

我有一个内联java脚本函数，它创建一个段落，并在单击按钮时调用。我不明白的是 for 循环中的条件代码。迭代直到达到button.length是什么意思？ (看到每次我单击按钮时，事件监听器都会捕获它并在浏览器上打印出文本，直到永远)。

    <script>
    function createParagraph()
    {
        var para = document.createElement('p');
        para.textContent = 'You Clicked a button!';
        document.body.appendChild(para);
    }       

    var buttons = document.querySelectorAll('button');

    for (var i = 0; i < buttons.length; i++)
    {
        buttons[i].addEventListener('click', createParagraph);
    }
</script>

Answer 1

您没有共享 HTML。

基本上，是将点击事件绑定(bind)到 HTML 中的所有按钮。

看看这段代码

您的代码将click事件绑定(bind)到按钮

function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'You Clicked a button!';
  document.body.appendChild(para);
}

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

<button>
Click me!
</button>
<button>
Click me!
</button>
<button>
Click me!
</button>
<button>
Click me!
</button>
<button>
Click me!
</button>