Я не уверен, почему мой цикл for не продолжает увеличивать "i"

#javascript #for-loop #iterator

#javascript #for-loop #итератор

Вопрос:

Мне трудно понять, почему мой код выполняется только один раз. Я могу щелкнуть первый появившийся квадрат, и класс изменится, но, похоже, на этом он останавливается. Я пытаюсь иметь возможность нажимать на квадраты, чтобы появлялись новые и так далее. Я не могу щелкнуть по второму созданному квадрату. Я зарегистрировал «totalSquares.длина», а также «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);
}

Ответ №1:

document.getElementById возвращает только 1 элемент.

Итак, вы помещаете один элемент ( squares ) в array ( totalSquares ) .
Итак, похоже totalSquares.length , что время выполнения цикла for должно быть равно 1.

Если у вас есть несколько элементов с идентификатором 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();

Вместо использования цикла for они предложили мне поместить EventListener непосредственно в функцию createSquare, чтобы это помещало EventListener прямо в квадрат.