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

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

The much better way is

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

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

[Greg]

dc*******@professionalaccess.com (Dipin) wrote in message news:<be**************************@posting.google. com>...

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('btn 1'));" /><br>
<input type="button" id='btn4' value='showFunction(btn2)'
onclick="showFunction(document.getElementById('btn 2'));" />
<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]

Dipin wrote:

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-HTM...ml#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-HTM...ml#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/doctorunc...e7Section.html