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

Question

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

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);
}

Answer 1

document.getElementById仅返回 1 个元素。

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

如果您有多个带有 id square元素，请为它们提供类square并使用document.querySelectorAll获取所有元素，如下所示：

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

Answer 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 直接放在方块上。

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

问题描述

2 个解决方案

解决方案1
1 2020-09-28 18:19:42

解决方案2
0 2020-09-28 18:37:03

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

问题描述

2 个解决方案

解决方案1 1 2020-09-28 18:19:42

解决方案2 0 2020-09-28 18:37:03

解决方案1
1 2020-09-28 18:19:42

解决方案2
0 2020-09-28 18:37:03