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
– Anderson Green, Commented May 5, 2013 at 19:29
Browsers have built in developer tools. That should be all you need to investigate. Keep in mind that your <table></table> has no <tbody> 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. — user1106925
– user1106925, Commented May 5, 2013 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. — user1106925
– user1106925, Commented May 5, 2013 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
– tmj, Commented May 5, 2013 at 19:32

Niet the Dark Absol · Accepted Answer · 2013-05-05 19:37:37Z

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 5, 2013 at 19:37

answered May 5, 2013 at 19:32

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

7 Comments

hank Over a year ago

His code probably worked all along but this is a much cleaner solution.

Niet the Dark Absol Over a year ago

@hank Yeah, I'm just noticing that after having thought about it some more XD

tmj Over a year ago

Yes this helps. Thanks. Please explain this <tbody> tag. First time I have ever heard of it.

Niet the Dark Absol Over a year ago

Tables have three distinct sections: <thead>, <tbody> and <tfoot>. 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 <tbody> 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 <tbody> elements.

user1106925 Over a year ago

It seems that browsers only insert the tbody when there's some content in the <table> (even just a single whitespace). Without content, it doesn't insert the <tbody>. I'd never noticed that before,.

|

Ankush Jain · Accepted Answer · 2013-05-05 19:34:02Z

1

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/

answered May 5, 2013 at 19:34

Ankush Jain

1,5271 gold badge15 silver badges24 bronze badges

Comments

chandreshkoyani · Accepted Answer · 2013-05-05 19:34:09Z

1

Java script is working but table is not display.

Add border=1 in Table

answered May 5, 2013 at 19:34

chandreshkoyani

1835 silver badges11 bronze badges

Comments

BingeBoy · Accepted Answer · 2013-05-05 20:22:39Z

0

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

answered May 5, 2013 at 20:22

BingeBoy

2,9811 gold badge19 silver badges12 bronze badges

Collectives™ on Stack Overflow

Cant understand why doesn't this javascript work

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related