Tic-Tac-Toe clear method JavaScript
What is wrong in my clear method:
function _Clear(){
for (var row = 0 ; row < tbl.rows.length; row++)
{
for (var cell = 0 ; cell < tbl.rows[row].cells.length; cell++)
{
tbl.rows[row].cells[cell].childNodes[0].src = null;
}
}
}
and this is my table:
tbl = document.getElementById("matrix");
When i click clear nothing happened why ?
more html:
<body>
<table>
<tr>
<td width="100pt">
<label>Player 1:</label> <input type="radio" name="players" id="player1"checked="checked"/>
</td>
<td width="100pt">
<label>Player 2:</label> <input type="radio" name="players" id="player2"/>
</td>
<td width="100pt">
<input type="button" onclick="_Clear()" value="Clear"/>
</td>
</tr>
</table>
<table id="matrix" border="1">
<tr>
<td class="cellCSS">
<img alt="Click Here" class="imageCSS" onclick="imageClicked(this,0,0)"/>
</td>
<td class="cellCSS">
<img alt="Click Here" class="imageCSS" onclick="imageClicked(this,0,1)"/>
</td>
<td class="cellCSS">
<img alt="Click Here" class="imageCSS" onclick="imageClicked(this,0,2)"/>
</td>
</tr>
<tr>
<td class="cellCSS">
<img alt="Click Here" class="imageCSS" onclick="imageClicked(this,1,0)"/>
</td>
<td clas开发者_如何学运维s="cellCSS">
<img alt="Click Here" class="imageCSS" onclick="imageClicked(this,1,1)"/>
</td>
<td class="cellCSS">
<img alt="Click Here" class="imageCSS" onclick="imageClicked(this,1,2)"/>
</td>
</tr>
<tr>
<td class="cellCSS">
<img alt="Click Here" class="imageCSS" onclick="imageClicked(this,2,0)"/>
</td>
<td class="cellCSS">
<img alt="Click Here" class="imageCSS" onclick="imageClicked(this,2,1)"/>
</td>
<td class="cellCSS">
<img alt="Click Here" class="imageCSS" onclick="imageClicked(this,2,2)"/>
</td>
</tr>
</table>
</body>
Any idea will be great
Thanks
I'm guessing it has something to do with how/when you declare your tbl variable.
http://jsfiddle.net/userdude/wfEhM/
If I declare it within the function and leave off the var, it's an internally scoped variable accessible when the function is called:
function _Clear(){
tbl = document.getElementById("matrix");
for (var row = 0 ; row < tbl.rows.length; row++)
{
for (var cell = 0 ; cell < tbl.rows[row].cells.length; cell++)
{
// Note, I changed this line for testing, since I don't
// have the images.
alert(tbl.rows[row].cells[cell].childNodes[0].src);
}
}
}
What I think is happening is that either, a) you're creating the tbl variable out of scope (within another function without the var keyword, for example), or b) you're creating it during page load or before the matrix element loads, not after, so that your tbl pointer doesn't point anywhere. Or maybe you're doing both of these.
check that your tbl variable is ok (using alert or something).
reading your code i assumed that you want to set the src attribute to empty when you click on the clear button... i debbuged your code and i saw that tbl.rows[row].cells[cell].childNodes[0] is actually a "\n" character (return to line)..
to avoid that, use tbl.rows[row].cells[cell].getChildren()[0] instead
good luck!
加载中,请稍侯......
精彩评论