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.
4 answers
solution1
3 ACCPTED 2013-05-05 19:32:28
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.
solution2
1 2013-05-05 19:34:02
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/
solution3
1 2013-05-05 19:34:09
Java script is working but table is not display.
Add border=1 in Table
solution4
0 2013-05-05 20:22:39
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.