javascript onblur函数不起作用

Question

I can't get onblur function at second row onwards, please help me. Here is my code.

javascript

function calc()
{
var fi = document.getElementById("one");
var se = document.getElementById("two");
var th = fi.value * 59.63;
document.getElementById("three").value=th;
} 
function addRow(){ 
//var table=document.getElementById('countTable');
var tbody=document.getElementsByTagName('TBODY')[0];
var row=document.createElement('TR');
var cell1=document.createElement('TD');
var cell2=document.createElement('TD');
var cell3=document.createElement('TD');

var cell1value='';
cell1value+='One <input type="text" name="one" id="one" value="">';
var cell2value='';
cell2value+='Two <input type="text" name="two" id="two" value="">';
var cell3value='';
cell3value+='Three <input type="text" name="three" id="three" value="">';

cell1.innerHTML=cell1value;
cell2.innerHTML=cell2value;
cell3.innerHTML=cell3value;

row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);

tbody.appendChild(row);
//alert(table+' '+row+' ');
}

HTML

<table name="entry" width="100%" id="countTable">
<TBODY>
<tr>
<td>One 
<input type="text" name="one" id="one" value="" onBlur="calc();">
</td>
<td>Two
<input type="text" name="two" id="two" value="" onBlur="calc();">
</td>
<td>Three
<input type="text" name="three" id="three" value="">
</td>
</tr>
</TBODY>
</table>

<input type="button" name="add" value="Add" onClick="addRow();">

Answer 1

Notice the input elements in your initial row:

<input type="text" name="one" id="one" value="" onBlur="calc();">

And the input elements in your subsequent rows:

<input type="text" name="one" id="one" value="">

There's a key difference between them which prevents the subsequent rows from making use of the onBlur event. In order to respond to the event, just like in the first row, you need to actually attach a handler for that event. Something like this:

<input type="text" name="one" id="one" value="" onBlur="calc();">

Note, however, that your code has other problems. Namely:

• You're re-using id values, so the behavior or anything using those id s (such as your calc function) will be undefined. id s need to be unique throughout the document.
• You're re-using name values. While allowed, this could lead to unintended side-effects when you try to use the values posted by this form. Later elements may obscure the values from earlier elements.