469,306 Members | 1,894 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,306 developers. It's quick & easy.

dynamic button onclick event not working

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
Jul 20 '05 #1
4 39046
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')");

Jul 20 '05 #2
> >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
Jul 20 '05 #3
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>
Jul 20 '05 #4
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

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by daveland | last post: by
1 post views Thread by SAN CAZIANO | last post: by
1 post views Thread by Nathan Bloomfield | last post: by
1 post views Thread by kusanagihk | last post: by
7 posts views Thread by extremerep | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.