您没有共享HTML。

Question

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

    <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。

基本上，将click事件绑定到HTML中的所有按钮。

请查看此代码段

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

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>

Answer 2

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

var按钮将接收页面上所有按钮元素的数组 buttons.length 是此数组的长度 - 页面上按钮元素的数量。

for (var i = 0; i < buttons.length; i++)

对于每个存在的按钮元素（按钮数组的长度），循环将迭代一次。

buttons[i]

指的是页面上的第i个按钮元素。

Answer 3

让我们一步一步地完成这个步骤：

1）createParagraph（）函数：

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

这是做什么的，它会创建一个<p>元素，其中包含一条消息＆＃39;您点击了一个按钮！＆＃39;并将其附加到DOM。

2）QuerySelector：

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

它找到与给定选择器匹配的每个元素 - 在这种情况下 - 所有按钮。它返回它们，在这种情况下，我们将它们存储在变量中。

3）for循环：

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

这实际上非常简单。它为按钮数组中的每个按钮迭代 - 这是我们使用上面的QuerySelector创建的按钮元素数组，并向其添加EventListener。反过来，这个EventListener通过运行我们在第1步中描述的函数来处理click个事件。

如果你把它们放在一起：

每次单击按钮（页面上的任何按钮）时，都会有一个<p>元素附加到DOM，其中包含消息You Clicked a button!。

Answer 4

观看'核心javaScript'的一些教程可能会对你有所帮助。具体来说，了解for循环并迭代数组。

在您的代码中，您将“事件监听器”附加到所有“按钮”元素。完成此任务的简化步骤如下：

将所有按钮元素收集到一个数组中（实际上它是一个类似数组的对象）。 document.querySelectorAll（ '按钮'）。在代码的引擎盖下会看起来像这样：[{tagName：button}，{tagName：button}，{tagName：button}，{tagName：button}];
将该数组存储到变量var buttons = document.querySelectorAll（'button'）;
现在按钮[0]指向第一个{tagName：button}元素。按钮[1]指向列表中的第二个按钮等。
buttons.length指的是数组（命名按钮）的长度。你需要按钮[0]，按钮[1]，按钮[2]等，直到你到达阵列的末尾。
当您说'buttons [2] .addEventListener（'click'，createParagraph）时，您将“click”处理程序添加到该特定按钮。
你不断迭代按钮数组的长度，因为你想为所有按钮添加一个“点击”处理程序。

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

4 个答案:

您没有共享HTML。

请查看此代码段