javascript - 通过点击从 HTMLCollection 获取索引

Question

在 HTML 中我有 9 <div> s 类为“.square”。

我想让它们可点击，我想知道点击了多少次和哪一个并将其存储到数组中。

所以，如果我点击第五个 <div>应点击 5 次[0,0,0,0,0,5,0,0,0]

    var button = document.getElementsByClassName("square");
    var clicked = [0,0,0,0,0,0,0,0,0];

    for (var i = 0; i < button.length; i++) {
       button[i].addEventListener("click", function () {});
       ;}

picture

Answer 1

您可以使用语句 let 对索引/变量 i 进行 block 作用域。

var button = document.getElementsByClassName("square");
var clicked = [0, 0, 0, 0, 0, 0, 0, 0, 0];

for (let i = 0; i < button.length; i++) {
  button[i].addEventListener("click", function() {
    clicked[i] += 1;
    
    console.log(clicked);
  });
}

<div class='square'>  [0] Click on me!</div><div class='square'>[1] Click on me!</div><div class='square'>[2] Click on me!</div><div class='square'>[3] Click on me!</div><div class='square'>[4] Click on me!</div><div class='square'>[5] Click on me!</div><div class='square'>[6] Click on me!</div><div class='square'>[7] Click on me!</div><div class='square'>[8] Click on me!</div>