changing contents of an element

[Donotalo]

I've a table defined like this:

<table width="100%" border="4" rules="none" bordercolor="darkblue">
<tr>
<td><input type="button" name="rolldicebutton" width="25%"
value="Roll dice (3)" onclick="roll_dice_clicked()" /></td>
<?php
for ($i = 0; $i < 5; $i++)
print "<td align='center' width='15%' name = 'dice_here'>0</td>";
?>
</tr>
</table>

so there are 5 table cells named dice_here. on the onClick event of the button, i want to change the value inside this table cells.

function roll_dice_clicked() {
var dice_here_data = document.getElementsByName("dice_here");

for (i = 0; i < dice_here_data.length; i++) {
//action here
}
}

how can i do this? please help.

i cannot use id attribute because on the server side i'm using php. when php gets some value by POST methode, it cannot recognize id's, though it can recognize name's.

another weird thing is that, inside roll_dice_clicked() function, the dice_here_data.length is 5 only in firefox (2.0.0.4), but it is 0 in opera 9.21 and IE 6. i tried it by window.alert(dice_here_data.length). why?

thanks in advance

[PeejAvery]

i cannot use id attribute because on the server side i'm using php. when php gets some value by POST methode, it cannot recognize id's, though it can recognize name's.
Yes, you can use document.getElementById() even when using a server-side language.

<table width="100%" border="4" rules="none" bordercolor="darkblue">
<tr>
<td><input type="button" name="rolldicebutton" width="25%" value="Roll dice (3)" onclick="roll_dice_clicked()" /></td>
<?php for($i = 0; $i < 5; $i++){ ?>
<td align="center" width="15%" if="dice<?php echo $i; ?>">0</td>
<?php } ?>
</tr>
</table>

[andreasblixt]

getElementsByName is not a function I'd recommend you to use. It doesn't work correctly in several browsers.

The solution PeejAvery gave you is probably the best one (though he meant id="dice... where it says if="dice...). What it does is it gives each <td> a unique ID (dice0, dice1, ...) which then lets you retrieve each TD separately:
for (var i = 0; i < 5; i++) {
var td = document.getElementById("dice" + i);
// ...
}

The reason you can't get a list of elements with an ID is because it's not valid to give the same ID to two elements. ID stands for IDentification, and is meant to uniquely identify elements.

On a sidenote; dice in singular is die. ;)

[PeejAvery]

The solution PeejAvery gave you is probably the best one (though he meant id="dice... where it says if="dice...).
Ah, the typos! Thanks for noticing that.

[Donotalo]

thanks for your time. :) but still i'm in confusion: using php how can i retrieve data of a particular element when i gave it an id?
<p id='some_id'>Data</p>

the following code is for javascript right?
document.getElementById("some_id");

how it can be used in php?

[PeejAvery]

So you are using PHP to also simulate the rolling of the dice?

[andreasblixt]

PHP (server) sends HTML to the browser (client). The browser only sends form fields back to PHP, when the form containing the fields is submitted. So if you want to be able to retrieve data from the browser in PHP, you need to make sure all data is in form fields:

<!-- A form field in HTML... -->
<input name="test" type="text" value="Hello" />

// Getting the value of the form field in PHP after the form was submitted by the user...
$test = $_REQUEST["test"];


And yes, document.getElementById(...) is JavaScript. You can, and probably should, do the rolling of the dice in the user's browser (unless you need to do it server-side due to security issues).