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 值。虽然允许，但当您尝试使用此表单发布的值时，这可能会导致意外的副作用。后面的元素可能会掩盖前面元素的值。