Help getting a variable out created in Javascript

Hi,

I've managed to get myself in a right pickle over getting a variable out of a table I've created using Javascript.

Basically, the table is within a basket system and works in that when you click on a row, the price in that row is set for the product price. Here is the table and preceeding Javascript:

<script type="text/javascript">
function setEvent(){
var ids = [1];
for(var j=0;j<ids.length;j++){
var rows=document.getElementById(ids[j]).getElementsByTagName('tr'), i=1, r;
while(r=rows[i++]){
i<rows.length?r.onclick=doActions:null;
}
}
function doActions(){
var rows=this.parentNode.getElementsByTagName('tr'), i=1, r, c, v;
var th=this.parentNode.parentNode.getElementsByTagName('th');
while(r=rows[i++]){
if(r==this){
r.style.backgroundColor='#ccc';
c=this.getElementsByTagName('td');
v=c[c.length-1].firstChild.data;
th[th.length-1].getElementsByTagName('p')[0].firstChild.data=v;
}
else{r.style.backgroundColor=''}
}
}
}
onload=setEvent;
</script>

<table cellpadding="3" cellspacing="1" class="basket_options_table" id="1">
<tr>
<tr>
<th>Usage</th>
<th>Resolution</th>
<th>File Size</th>
<th>Price</th>
</tr>
</tr>

<tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
<td>FREE</td>
<td>320 x 288 pixels</td>
<td>size</td>
<td>&pound;0</td>
</tr>
<tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
<td>Personal Use</td>
<td>320 x 288 pixels</td>
<td>size</td>
<td>&pound;5</td>
</tr>
<tr>
<th colspan="3"></th>
<th class="basket_record_price">
<p>&pound;</p>
</th>
</tr>
</table>

How can I get the price out which is dynamically created in the script? I'm really confused and rather new at this so any help would be great! :)

I don't pretend to understand the question, and I'd bet nobody else does either.

For the life of me, I can't see how that code is supposed to do anything. It certainly doesn't seem to work. If you click on the top row, all you get is an error (missing a child node) and if you click on any other row, nothing happens.

If all you wanted to do was copy either the zero or the 5 to the last line when one of the two data rows was clicked on, you couldn't have made it much harder, I think.

Something as simple as this will accomplish that:

<table cellpadding="3" cellspacing="1">
<tr style="background-color: black; color: white;">
<th>Usage</th>
<th>Resolution</th>
<th>File Size</th>
<th>Price</th>
</tr>
<tr class="normal"
onmouseover="this.style.backgroundColor='lightgrey';"
onmouseout= "this.style.backgroundColor='transparent';"
onclick="document.getElementById('TOTAL').innerHTML='0';">
<td>FREE</td>
<td>320 x 288 pixels</td>
<td>size</td>
<td>&pound;0</td>
</tr>
<tr class="normal"
onmouseover="this.style.backgroundColor='lightgrey';"
onmouseout= "this.style.backgroundColor='transparent';"
onclick="document.getElementById('TOTAL').innerHTML='5';">
<td>Personal Use</td>
<td>320 x 288 pixels</td>
<td>size</td>
<td>&pound;5</td>
</tr>
<tr>
<td colspan="3"></td>
<td style="font-weight: bold;">&pound;<span ID="TOTAL"></span></td>
</tr>
</table>


But since I'm not really sure what your aim was, the above could be completely inappropriate.

By the way, numeric IDs--indeed, IDs just starting with a digit--are poison in some code.

ids must begin with a letter, not a digit or a special character. See: http://www.w3.org/TR/html4/types.html#type-id