Cant understand why doesn't this javascript work

Question

<!DOCTYPE html>
<html>
<head>
    <title>Anti Chess</title>
</head>
<body>
    <h1 id="game_title">Anti Chess by theManikJindal</h1>
    <br />
    <br />

    <table id="game"></table>
    <script>
        var white = 1;
        var ta = document.getElementById("game");
        if(white == 1)
        {
            for(var i=0;i<8;i++)
            {
                var x = document.createElement('tr');
                ta.appendChild(x);
                for(var j=0;j<8;j++)
                {
                    var y = document.createElement('td');
                    ta.childNodes[i].appendChild(y);
                    ta.childNodes[i].childNodes[j].setAttribute("id",String.fromCharCode(j+97)+(8-i).toString());
                }

            }

        }
        else
        {
            for(var i=0;i<8;i++)
            {
                var x = document.createElement('tr');
                ta.appendChild(x);
                for(var j=0;j<8;j++)
                {
                    var y = document.createElement('td');
                    ta.childNodes[i].appendChild(y);
                    ta.childNodes[i].childNodes[j].setAttribute("id",String.fromCharCode(104-j)+(i+1).toString());
                }

            }

        }
    </script>
</body>
</html>

I cannot understand why this script is not working. Are there any good debuggers for Javascript or does one have to keep on smashing their heads against the wall to make some sense.

Please help

The script is supposed to create a table with 8x8 boxes and the attribute id should be set from "a8","b8","c8"..."h8" to "a1","b1","c1"..."h1" . for a when the value of white is 1. And from "h","g1","f1"..."a1" to "h8","g8",..."a8" for white not equal to 1. white =1 is default for now.

What's the specific problem here? Which parts are working properly, and which parts aren't working properly? — Anderson Green, May 05 '13 at 19:29
Browsers have built in developer tools. That should be all you need to investigate. Keep in mind that your `
` has no `` element, but the browser is likely inserting one, so `ta.childNodes[0]` is likely that `tbody`. To be safe, insert one in your markup, and change the script to account for it. — , May 05 '13 at 19:30
...also, instead of using collections like `.childNodes` on a table, use the table-specific collections that are provided. A `table` has `.rows[]` and a `row` has `.cells[]`. Also, an `table` has `.tBodies[]` and a `tbody` has `.rows[]`. These provide a nicer semantic interface when manipulating tables. — , May 05 '13 at 19:32
@Anderson Only the heading is showing up. and the script is not running at all. If it would have run the page source would have got edited. right? — tmj, May 05 '13 at 19:32
@tMJ Which web browser are you using? Google Chrome [has a debugger that you can use to step through each statement in the script](http://stackoverflow.com/a/1576541/975097). — Anderson Green, May 05 '13 at 19:33
...use [this quirksmode table](http://www.quirksmode.org/dom/w3c_html.html#tables) as a reference for the various table manipulation properties and methods that are at your disposal. — , May 05 '13 at 19:37
all you need is to give them width and height in css [FIDDLE](http://jsfiddle.net/n3Pyc/) — Mi-Creativity, May 05 '13 at 19:40
The script is running and creating a table that's why there are no errors.There is no content in the table, try putting in some "console.log()"'s to see output in console. — BingeBoy, May 05 '13 at 20:09

Niet the Dark Absol · Accepted Answer · 2013-05-05T19:37:37.327

3

Tables must always have at least one <tbody> element. If it does not, the browser will create one.

This means that your entire childNodes access is wrong.

I would suggest this HTML:

<table><tbody id="game"></tbody></table>

That should make your code work, but you can simplify it further:

var white = 1, a = "a".charCodeAt(0), i, j, x, ta = document.getElementById("game");
for(i=0;i<8;i++) {
    x = document.createElement('tr');
    for(j=0;j<8;j++)
        x.appendChild(document.createElement('td')).id =
               String.fromCharCode((white == 1 ? j : 8-j)+a)+(white == 1 ? 8-i : i+1);
    ta.appendChild(x);
}

As you can see I have eliminated the need for the entire block of code to be repeated, by moving the white == 1 check to the most relevant place. I have also made more use of the x reference, and I have replaced the "magic" values with something that will be easier to understand when you come back to it later (the a variable).

Hope this helps!

EDIT: Also, I just noticed that the table has no content - is this what you mean by it not showing up? Make sure you have suitable CSS to make the table cells visible.

edited May 05 '13 at 19:37

answered May 05 '13 at 19:32

Niet the Dark Absol

320,036
81
464
592

1

His code probably worked all along but this is a much cleaner solution. – hank May 05 '13 at 19:35
@hank Yeah, I'm just noticing that after having thought about it some more XD – Niet the Dark Absol May 05 '13 at 19:36
Yes this helps. Thanks. Please explain this tag. First time I have ever heard of it. – tmj May 05 '13 at 19:37
Tables have three distinct sections: ``, `` and ``. Regardless of the order in which they appear in the HTML, they will always appear in the order "head-body-foot" in the rendered output, somewhat like the Flexbox `order` allows. You can have multiple `` elements, which each contain a logical "block" of rows - you almost always only need one, but there can be many good uses for more, for instance I sometimes convert a table into a tabbed interface by showing/hiding `` elements. – Niet the Dark Absol May 05 '13 at 19:40
It seems that browsers only insert the `tbody` when there's some content in the `` *(even just a single whitespace)*. Without content, it doesn't insert the ``. I'd never noticed that before,.
– May 05 '13 at 19:43
Your code is really slick.But now I am stuck about how to get the class of each cell set to a particular value. – tmj May 05 '13 at 20:12
I'm assuming you want to alternate "white square" and "black square" classes? Try expanding out: `y = x.appendChild(document.createElement('td')); y.id = String.....; y.className = i%2 == j%2 ? "white" : "black";` - if that doesn't work, try switching the "white" and "black" strings. – Niet the Dark Absol May 06 '13 at 00:12

score 1 · Answer 2 · answered May 05 '13 at 19:34

This script is working fine. I have inspcted element in jsfiddle and found that elements are created.

I have used some css to show that boxes have been created.

css

table{
border:1px solid black;
}
table tr, td{
border:1px solid black;
}

see here http://jsfiddle.net/9uHPx/

score 1 · Answer 3 · answered May 05 '13 at 19:34

1

Java script is working but table is not display.

Add border=1 in Table

answered May 05 '13 at 19:34

chandreshkoyani

183
4
11

score 0 · Answer 4 · answered May 05 '13 at 20:22

Script is working fine. Added a couple loops so the ID will print to in the td tag so you can see what's going on. http://jsfiddle.net/5YRKx/

        var tableTemp = document.getElementById("game");

    for (var ii = 0, row; row = tableTemp.rows[ii]; ii++) {
       //iterate through rows
       //rows would be accessed using the "row" variable assigned in the for loop
       for (var j = 0, col; col = row.cells[j]; j++) {
        row.cells[j].innerHTML  =  row.cells[j].id;
       }  
    }

Cant understand why doesn't this javascript work

4 Answers4