CODEWITHSUNDEEP
javascripthtml
alexp2603
alexp2603

Reputation: 365

Arrays and iteration JS and HTML

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

Upvotes: 0

Views: 104

Answers (2)

vanzand
vanzand

Reputation: 41

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

Upvotes: 1

Boris K
Boris K

Reputation: 1552

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

Upvotes: 3

Related Questions