I'm not sure why my for loop doesn't continue incrementing "i"

Question

I'm having difficulty understanding why my code only runs once. I can click the first square that appears and the class changes, but it seems to stop there. I am trying to be able to click squares and have new ones appear and so on. I am unable to click the second square that is created. I've logged "totalSquares.length" as well as "i". "i" seems to be less than the length of totalSquares so I am unsure why my loop stops. I also have a Codepen link here. Thank you in advance. Let me know if you need more clarification.

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

Your loop only runs once. There is nothing in `createSquare` that tells it to add the event listener to the new square. — Niet the Dark Absol, Sep 28 '20 at 18:19

Igor Bykov · Answer 1 · 2020-09-28T18:43:19.257

1

document.getElementById returns only 1 element.

So, you push a single element (squares) into an array (totalSquares).
So, it looks like the for loop runs totalSquares.length times which must be 1.

If you have multiple elements with id square, give them class square instead & get all elements with document.querySelectorAll like this:

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

edited Sep 28 '20 at 18:43

answered Sep 28 '20 at 18:19

Igor Bykov

2,532
3
11
19

score 0 · Answer 2 · answered Sep 28 '20 at 18:37

Thank you guys for the answers. I received some help and the code below accomplishes what I'm trying to achieve.

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

Instead of using a for-loop they suggested I put the eventListener directly in the createSquare function so this places an eventListener directly on the square.

I'm not sure why my for loop doesn't continue incrementing "i"

2 Answers2