Arrays and iteration JS and HTML

Question

So as a learning exercise of combining CSS, JS and HTML into an interactive exercise, I have decided to recreate the 2048 game on a web browser using JS HTML and CSS. I basically coded 16 "box" elements within a square game board.

My issue related primarily to passing javascript arrays across functions. When I create my "boxes" array in cycleBoxes() the length is 16 as it should be. However, when I push empty div elements into "emptyBoxes" the length remains 1 and is in turn returned to my currently incomplete generateNumber() function. This is probably due to my for loop iterating only once. However, I don't understand why this is since it should technically iterate 16 times (console.log(boxes.length) returns 16) no?

Here is an example of how classes are built using div containers:

<div id = "game_background">

            <!-- Row 1 --> 

            <div id = "row_1" class = "row">

                <div id = "1_1" class = "box">
                    <p class = "v"></p>
                </div>

                <div id = "1_2" class = "box">
                    <p class = "v"></p>
                </div>

                <div id = "1_3" class = "box">
                    <p class = "v"></p>
                </div>

                <div id = "1_4" class = "box">
                    <p class = "v"></p>
                </div> 

            </div>

            <!-- Row 2 --> 
            <div id = "row_2" class = "row">

                <div id = "2_1" class = "box">
                    <p class = "v"></p>
                </div>

                <div id = "2_2" class = "box">
                    <p class = "v"></p>
                </div>

                <div id = "2_3" class = "box">
                    <p class = "v"></p>
                </div>

                <div id = "2_4" class = "box">
                    <p class = "v"></p>
                </div>
            </div>

And here is my JS

function generateNumber(){
    var emptyBoxes = [];
    emptyBoxes = cycleBoxes();
    console.log(emptyBoxes.length);
    //var random = Math.floor((Math.random()* (emptyBoxes.length+1) ));
}


function cycleBoxes(){
    var boxes = document.getElementsByClassName("v");
    console.log(boxes);

    var emptyBoxes = [];
    for(i = 0; i < boxes.length; i++){
        if( boxes[i].innerHTML == ""){
            emptyBoxes.push(boxes[i]);
        }

    return emptyBoxes;
}

It looks like you return emptyBoxes in the first iteration of the for loop — AranS
– AranS, Commented Jan 5, 2017 at 14:31
Where's the closing brace for the for loop? Guessing you have a brace somewhere with inconsistent indentation that allows the code to run with the return inside the loop. — user1106925
– user1106925, Commented Jan 5, 2017 at 14:33
Side note: document.querySelectorAll(".v:empty") makes things cleaner for you. Modern engines would let you do: return [...document.querySelectorAll(".v:empty")] — user1106925
– user1106925, Commented Jan 5, 2017 at 14:34
Wow, actually a terrible mistake on my behalf. Very sorry about that! Also, thanks Squint for the help! — alexp2603
– alexp2603, Commented Jan 5, 2017 at 14:36

Boris K · Accepted Answer · 2017-01-05 14:38:06Z

3

You forgot the closing brace of the for loop :

for(i = 0; i < boxes.length; i++){
    if( boxes[i].innerHTML == ""){
        emptyBoxes.push(boxes[i]);
    }
}

Working jsFiddle

answered Jan 5, 2017 at 14:38

Boris K

1,5641 gold badge12 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vanzand · Accepted Answer · 2017-01-05 14:41:34Z

1

The code below is the right answer:

function cycleBoxes(){
    var boxes = document.getElementsByClassName("v");
    console.log(boxes);

    var emptyBoxes = [];
    for(i = 0; i < boxes.length; i++){
        if( boxes[i].innerHTML == ""){
            emptyBoxes.push(boxes[i]);
        }
    } // you forget this, without this, emptyBoxes will return with length 1
    return emptyBoxes;
}

answered Jan 5, 2017 at 14:41

vanzand

414 bronze badges

Collectives™ on Stack Overflow

Arrays and iteration JS and HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related