Trying to pass by value in Javascript multi-dim array

Question

So, I'm building a web site that you can play othello on as a code sample. I've got a multidimensional array as the behind-the-scenes gameboard, and then iterate through every 'td' in a table to match the value of the corresponding array member. The problem i'm encountering is that iterating through the table. and using the iterators as essentially coordinates to my array doesn't work. As the iterator increases in value, so too does the coordinates in each of my 'td's. I'm stumped, and running on fumes. Any help would be appreciated.

function gridArray() {
    // creates game board's array.  
    for (var i = 0; i < gameArray.length; i++) {
        gameArray[i] = new Array(8);
    }

    for (var row = 0; row < gameArray.length; row++) {
        for (var col = 0; col < gameArray[row].length; col++) {
            gameArray[row][col] = "green";
        }
    }
}

function drawGrid(){
    // writes table to HTML document
    var htmlString = "<table id='othelloGrid'><tr>";
        for (var i = 0; i < 8; i++) {
            htmlString += "<th>" + i + "</th>";
        }
        htmlString += "</tr>";
        for (var j = 0; j < 8; j++) {
            htmlString += "<tr>";
            xPos = j;
            for (var x = 0; x < 8; x++) {
                yPos = x;
                // HERE!!!  I now realize javascript passes by reference, so      as this loop iterates, 
                // every single 'td' is getting 'onclick = 'changeClass(7, 7)''.
                // for my game grid to work, I need each td to have a unique xPos, yPos to
                // connect back to gameArray.
                htmlString += "<td onclick = 'changeClass(xPos, yPos)'></td>";
            }
            htmlString += "</tr>";
        }
    htmlString += "</table>";

    return htmlString;
}

Barmar · Accepted Answer · 2016-01-28 02:05:51Z

3

Variables are not expanded inside strings. So all your TDs have the literal attribute onclick='changeClass(xPos, yPos)' in them, not the values of these variables from the loop. So when you actually click on them, they all use the most recent values of those variables.

You need to use string concatenation to get the values. And there's no need for the global variables xPos and yPos, you can use the local j and x variables.

htmlString += "<td onclick = 'changeClass(" + j + ", " + x + ")'></td>";

answered Jan 28, 2016 at 2:05

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

6 Comments

Alberto Alexander Rodriguez Over a year ago

I've seen that in some cases it helps to use xval / yval as TD parameters. So, when you get click on a cell, you can always query $(this).attr('xval') or $(this).attr('yval') which will return the position on the table (hence eliminating the need of the iteration).

Barmar Over a year ago

@AlbertoAlexanderRodriguez That's how I would do it, although you shouldn't create custom attributes like that. Use data-xval

user3042535 Over a year ago

Oh god bless you. I need sleep.

Alberto Alexander Rodriguez Over a year ago

I usually add custom attributes to avoid unnecessary iterations. The more, the merrier.

Barmar Over a year ago

Why do you use custom attributes instead of using the standard data-XXX attributes? E.g. data-xval="123"

|

Collectives™ on Stack Overflow

Trying to pass by value in Javascript multi-dim array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related