dynamic button onclick event not working

[Dipin]

Hi All;

I have this javascript which is adding a new button to the column in
the row which is created dynamically, the innerhtml shows that the
onclick event is correctly added but it never gets invoked when I
click it.

newcol = doc.createElement("TD");
newbutton = doc.createElement("input");
newbutton.name = "newChange"+__uid;
newbutton.width = 15;
newbutton.height = 15;
newbutton.type = "button";
newbutton.onclick = "alert('hi');";
newcol.appendChild(newbutton);
alert(newcol.innerHTML);
newrow.appendChild(newcol);
tbl.appendChild(newrow);
__uid++;
window.close();

Any help will be greatly appreciated.

Thanks
Dipin

 

[Lee]

Dipin said:

Hi All;

I have this javascript which is adding a new button to the column in
the row which is created dynamically, the innerhtml shows that the
onclick event is correctly added but it never gets invoked when I
click it.

newcol = doc.createElement("TD");
newbutton = doc.createElement("input");
newbutton.name = "newChange"+__uid;
newbutton.width = 15;
newbutton.height = 15;
newbutton.type = "button";
newbutton.onclick = "alert('hi');";

In HTML, the onclick attribute has a string value, but in
JavaScript, it is not a string, but a reference to a Function.
One way to accomplish this is:

newbutton.onclick=new Function("alert('hi')");

 

[Douglas Crockford]

I have this javascript which is adding a new button to the column in

In HTML, the onclick attribute has a string value, but in
JavaScript, it is not a string, but a reference to a Function.
One way to accomplish this is:

newbutton.onclick=new Function("alert('hi')");

The much better way is

newbutton.onclick = function () {
alert('hi');
};

http://www.crockford.com/javascript/inheritance.html

 

[Greg]

Hi All;

I have this javascript which is adding a new button to the column in
the row which is created dynamically, the innerhtml shows that the
onclick event is correctly added but it never gets invoked when I
click it.

newcol = doc.createElement("TD");
newbutton = doc.createElement("input");
newbutton.name = "newChange"+__uid;
newbutton.width = 15;
newbutton.height = 15;
newbutton.type = "button";
newbutton.onclick = "alert('hi');";
newcol.appendChild(newbutton);
alert(newcol.innerHTML);
newrow.appendChild(newcol);
tbl.appendChild(newrow);
__uid++;
window.close();

Any help will be greatly appreciated.

Thanks
Dipin

Aren't you assigning a string to newbutton.onclick? I presume that
typeof(newbutton.onclick) is string:

<input type="button" id='btn1' value='string' /><br>
<input type="button"id='btn2' value='anonymous script block'
onclick='return clickHandler();'/><br>
<input type="button" id='btn3' value='showFunction(btn1)'
onclick="showFunction(document.getElementById('btn1'));" /><br>
<input type="button" id='btn4' value='showFunction(btn2)'
onclick="showFunction(document.getElementById('btn2'));" />
<script type='text/javascript'>
function clickHandler(){
alert('in clickhandler');
return 1;
}
function showFunction(btn){
alert(btn.onclick.toString() + '\ntype: ' + typeof(btn.onclick));
}
document.getElementById('btn1').onclick = 'return clickHandler();';
</script>

 

[DU]

Hi All;

I have this javascript which is adding a new button to the column in
the row which is created dynamically, the innerhtml shows that the
onclick event is correctly added but it never gets invoked when I
click it.

newcol = doc.createElement("TD");

newcol = newrow.insertCell(index);
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016

newbutton = doc.createElement("input");
newbutton.name = "newChange"+__uid;
newbutton.width = 15;
newbutton.height = 15;
newbutton.type = "button";
newbutton.onclick = "alert('hi');";

newbutton.onclick = new Function(evt)
{alert("hi");};

newcol.appendChild(newbutton);
alert(newcol.innerHTML);

Not necessary.

newrow.appendChild(newcol);

with insertCell(index), the above instruction is no longer needed.

tbl.appendChild(newrow);

Also, much performant is insertRow(index);
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903


insertCell() and insertRow are very well supported among recent browser
versions.

__uid++;
window.close();

You're closing the window? Why?

Any help will be greatly appreciated.

Thanks
Dipin

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html