我不确定为什么我的 for 循环不会继续增加“i”答案

【问题标题】：I'm not sure why my for loop doesn't continue incrementing "i"我不确定为什么我的 for 循环不会继续增加“i”
【发布时间】：2020-09-28 18:14:55
【问题描述】：

我很难理解为什么我的代码只运行一次。我可以单击出现的第一个方块并更改班级，但它似乎停在那里。我试图能够单击方块并出现新的方块等等。我无法单击创建的第二个正方形。我已经记录了“totalSquares.length”和“i”。 “i”似乎小于 totalSquares 的长度，所以我不确定为什么我的循环会停止。我还有一个 Codepen 链接 here。先感谢您。如果您需要更多说明，请告诉我。

HTML：

<body>
    <h1>Test
        <br>
        Your
        <br>
        Aim
    </h1>

    <p>Score: </p><span id="score">0</span>

    <div id="container">
        <div id="square"></div>
    </div>
    

    <script src="script.js"></script>
</body>

JS：

let totalSquares = [];
const squares = document.getElementById("square");
const totalScore = document.getElementById("score");
const heading = document.querySelector("h1");
let score = 0;

totalSquares.push(squares);

for (var i = 0; i < totalSquares.length; i++) {
    totalSquares[i].addEventListener("click", function() {
        createSquare();
        this.classList.add("clicked");
        score++;
        totalScore.innerHTML = score;
        console.log(totalSquares.length, i);
    });
}

function createSquare() {
    let div = document.createElement('div');
    div.setAttribute("id", "square");
    document.getElementById("container").appendChild(div);
    totalSquares.push(div);
}

【问题讨论】：

你的循环只运行一次。 createSquare 中没有任何内容告诉它将事件侦听器添加到新方块。

标签： javascript for-loop iterator

【解决方案1】：

document.getElementById 仅返回 1 个元素。

因此，您将单个元素 (squares) 推送到数组 (totalSquares) 中。
因此，看起来 for 循环运行 totalSquares.length 次，必须为 1。

如果您有多个 id 为 square 的元素，请将它们指定为 square 类并获取所有带有 document.querySelectorAll 的元素，如下所示：

const squares = document.querySelectorAll('.square');

【讨论】：

【解决方案2】：

谢谢大家的回答。我收到了一些帮助，下面的代码完成了我想要实现的目标。

const squares = document.getElementById("square");
const totalScore = document.getElementById("score");
let score = 0;

function createSquare() {
    let div = document.createElement('div');
    div.setAttribute("id", "square");

    div.addEventListener("click", function() {
        this.classList.add("clicked");
        score++;
        totalScore.innerHTML = score;
        createSquare();
    });
    document.getElementById("container").appendChild(div);
}

createSquare();

他们建议我将 eventListener 直接放在 createSquare 函数中，而不是使用 for 循环，以便将 eventListener 直接放在广场上。

【讨论】：