For loop in Javascript isn't working

Question

New to javascript, but in my mind my html should produce a grid that I created. None of the tr or td elements are being populated from my js file. Does anyone know why or what I'm missing? Thanks for your help.

Here is my js file:

function showGrid() {
    var gridDiv = document.getElementById("gridDiv");
    gridDiv.innerHTML = genGrid();
}

function genGrid() {
    var html = "";
    var row = 8;
    var i = 0;
    var j = 0;
    var tdClass = "";

    for (i = row; i > 0; i--) {

        html += "<tr>";

        for (j = row; j > 0; j--) {
            var r = j % 2;
            if (r = 0) {
                tdClass = "red";
            } else {
                tdClass = "black";
            }

            html += "<td class=\"" + tdClass + "\"></td>";
        }
        html += "</tr>";
    }
    return html;
}

Here is my html file:

<!DOCTYPE HTML>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<html>
    <head>
        <link rel="stylesheet" type=text/css href="style.css">
        <script src="genGame.js"></script>
    </head>
    <body onload="showGrid()">

        <div id="gridDiv">
        This should get overridden
        </div>
    </body>

</html>

You are missing data. There's nothing in your td elements. Hence there's nothing to show. — Aadit M Shah
– Aadit M Shah, Commented Feb 1, 2015 at 7:42
If I had to guess, the OP probably has width, height, and background CSS that is not posted — asimes
– asimes, Commented Feb 1, 2015 at 7:44
You also have a typo. "if (r = 0) {" should be "if (r === 0) {" as you have it, it is assgning 0 to r, but tests like "if(0)" which is false so always will be black — Dave Pile
– Dave Pile, Commented Feb 1, 2015 at 8:46

Ed Heal · Accepted Answer · 2015-02-01 07:37:46Z

1

This

    <div id="gridDiv">
    This should get overridden
    </div>

Should be

    <table id="gridDiv">
    This should get overridden
    </table>

answered Feb 1, 2015 at 7:37

Ed Heal

60.3k18 gold badges91 silver badges137 bronze badges

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

3 Comments

Aadit M Shah Over a year ago

That's not the only problem. The problem is that there's nothing in the OP's table.

Aadit M Shah Over a year ago

html += "<td class=\"" + tdClass + "\"></td>";

cakes88 Over a year ago

this made the table appear in the html, ty @Ed Heal.

Rasel · Accepted Answer · 2015-02-01 08:51:48Z

You have no data in <td></td>

<script>
    function showGrid() {
   var gridDiv = document.getElementById("gridDiv");
    gridDiv.innerHTML = genGrid();
}
    function genGrid() {
    var html = "";
    var row = 8;
    var i = 0;
    var j = 0;
    var tdClass = "";

    for (i = row; i > 0; i--) {

        html += "<tr>";

        for (j = row; j > 0; j--) {
            var r = j % 2;
            if (r == 0) {
                tdClass = "red";
            } else {
                tdClass = "black";
            }

            html += "<td class=\"" + tdClass + "\">-data-</td>";
        }
        html += "</tr>";
    }
    return html;
}
</script>



<body onload="showGrid()">
        <table id="gridDiv">
            This should get overridden
        </table>
 </body>

comparision should also ok

if (r == 0) {
                tdClass = "red";
            }

link

Collectives™ on Stack Overflow

For loop in Javascript isn't working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related