CODEWITHSUNDEEP
javascripthtmlfor-loop
cakes88
cakes88

Reputation: 1917

For loop in Javascript isn't working

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>

Upvotes: 0

Views: 62

Answers (2)

Rasel
Rasel

Reputation: 5734

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

Upvotes: 0

Ed Heal
Ed Heal

Reputation: 60007

This

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

Should be

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

Upvotes: 1

Related Questions