javascript onblur function not working - Stack Overflow

admin管理员组

文章数量:1406063

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();">

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();">

• javascript

Share Improve this question Follow edited May 27, 2014 at 12:01 invernomuto 10.2k55 gold badges4242 silver badges5353 bronze badges asked May 27, 2014 at 11:59 KarthikKarthik 3311 silver badge66 bronze badges 1

• 2 Where do you make use of the onBlur event in any other row? – David Commented May 27, 2014 at 12:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 ids (such as your calc function) will be undefined. ids 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.

本文标签： javascript onblur function not workingStack Overflow