javascript onblur功能无法正常工作

Question

我无法在第二排获得onblur功能,请帮助我.这是我的代码.

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

注意第一input行中的元素:

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

以及后续行中的输入元素:

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

它们之间存在一个关键的区别,这会阻止后续行使用该onBlur事件.为了响应事件,就像在第一行中一样,您需要为该事件实际附加处理程序.像这样的东西:

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

但请注意,您的代码还有其他问题.即:

• 您正在重复使用id值,因此行为或使用这些行为的任何内容id(例如您的calc函数)将是未定义的. id需要在整个文件中保持独特性.
• 你正在重复使用name价值观.虽然允许,但当您尝试使用此表单发布的值时,这可能会导致意外的副作用.后面的元素可能会模糊早期元素的值.