onclick event works incorrectly 1

[zinja]

I cannot understand the following:

I am creating an html table in a div using a javascript function and want to have the row clickable so that I can select a specific row. Problem is when the tables is created, the onclick event fires. It doesn't fire when the row is clicked only when it is rendered. Any ideas?

function clickme(i)
{
	alert(i);
}

function buildDisplay(transnumber) 
{
	// Function used to build the display - Credit to Bob Shuff

	
	// Get the subtotal and tax amounts for the footer
	var subtotaldue = subtotal();
	var taxdue = tax();
	 
	var innerHTML = '';
	innerHTML += '<table id="itemTable" cellspacing="0" style="' + cssDisplayTable + '">';
	innerHTML += '<thead>';
	innerHTML += '<tr>';
	innerHTML += '<td width="40" align="left">Dept</td>';
	innerHTML += '<td width="190" align="center">Description</td>';
	innerHTML += '<td width="20" align="center">Qty</td>';
	innerHTML += '<td width="75" align="right">Co-Pay</td>';
	innerHTML += '<td width="75" align="right">Price/Ea</td>';
	innerHTML += '<td width="75" align="right">Line total</td>';
	innerHTML += '</tr>';
	innerHTML += '</thead>';
	innerHTML += '<tfoot>';
	innerHTML += '<tr>';
	innerHTML += '<td colspan="7" align="right"></td>';
	innerHTML += '</tr>';
//	innerHTML += '<tr>';
//	innerHTML += '<td colspan="7" align="right" >Subtotal: ' + subtotaldue + '</td>';
//	innerHTML += '</tr>';
//	innerHTML += '<tr>';
//	innerHTML += '<td colspan="7" align="right">Tax: ' + taxdue + '</td>';
//	innerHTML += '</tr>';
	innerHTML += '</tfoot>';
	innerHTML += '<tbody>';

	<!-- Start of Table Data -->
	if (item_department.length) 
	{
		for (i=0;i<=item_index;i++)
		{
			innerHTML += '<tr class="sel" onclick='+clickme(i)+'>';
			innerHTML += '<td align="left">'+item_department[i]+'</td>';
			innerHTML += '<td align="center">'+item_name[i].substring(0,24)+'</td>';
			innerHTML += '<td align="center">'+item_qty[i]+'</td>';
			innerHTML += '<td align="right">'+fixeddecimal(item_copay[i])+'</td>';
			innerHTML += '<td align="right">'+fixeddecimal(item_price[i])+'</td>';
			innerHTML += '<td align="right">'+item_subtotal[i]+'</td>';
			innerHTML += '</tr>';
		 } 
		 
		<!-- End of Table Data -->
		innerHTML += '</tbody>';
		innerHTML += '</table>';
			
		document.getElementById('regdisplay').innerHTML = innerHTML;
  	} 
	else // Clear out the screen elements if there is no data
	{
    	document.getElementById('regdisplay').innerHTML = '&nbsp';
		document.getElementById('regsubtotal').innerHTML = '&nbsp';
		document.getElementById('regtaxamount').innerHTML = '&nbsp';
		document.getElementById('regtotal').innerHTML = '&nbsp';
		document.getElementById('RxSign').innerHTML = '&nbsp';
 	}
}

Thanks in advance.

LJ

LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.

 

[jpadie]

is it not because in this line

innerHTML += '<tr class="sel" onclick='+clickme(i)+'>';

you are actually calling the function rather than outputting the text?

i guess what you want might be more like

innerHTML += '<tr class="sel" onclick="clickme('+i+')">';

 

[zinja]

Dude!

I didn't understand the difference, but now I do. Thanks so much! I love Javascript and really did try to figure it out on my own first, you made it seem so easy.

Thanks again!

LJ

LJ Wilson

My personal saying - Just remember, it can always get worse, and usually will.