Set onClick event in a button created on the fly

[pnj]

Hi,
I'm trying to create a button on the fly with the DOM, but I can't figure out what property sets the onClick event.  Here is my snippet:

[code]      document.createElement("button");
      c.onClick = 'window.alert("foo"); return false;';
      c.innerHTML = 'Do something';
      parent.appendChild (c);
[/code]
I get a button that does nothing, just submits the form, (which the return false is supposed to prevent.)  It does not display the window.

Thoughts?

Thanks
pnj

[tomfmason]

ok I am sure that this is not the full code as I do not see c defined anywhere..

Try this..

[code=php:0]
try {
    c = document.createElement('<input type="button" name="something" value="Click Me" onclick="something();">');
} catch (e) {
    c = document.createElement('input');
    c.setAttribute('type', 'button');
    c.setAttribute('name', 'someting');
    c.setAttribute('value', 'Click Me');
    c.setAttribute('onclick', 'something();');
}[/code]

Hope that helps,
Tom

[pnj]

Thanks Tom, this works.

But why the try/catch block?  Browser dependence?

-pnj

[tomfmason]

Yea.. Microshaft Internet Explorer will not set a name attribute the first way..

[pnj]

awesome, thanks! :-)
-pnj

[obsidian]

Another way would be to assign functions to your triggers:
[code]
c = document.createElement('input');
c.onclick = function() {
  alert('foo');
  return false;
}
[/code]

[pnj]

thanks, this makes good sense, this is the approach i was hoping to use and understand.
-pnj

[ccx004]

I wish this worked in IE6 but I can't get it to.

Something like
c = document.createElement('button');
c.onclick=something;

or c.onclick = function ()
{
  ......
};

ought to work but although the button is created and displayed it never does anything when I click on it. However,

c = document.createElement('<input type="button" onclick="something();">');

works fine in IE. Of course it is completely horrible. I've spent hours trying to find something that works like it should but got nowhere. Despite all the examples which seem to work when I copy the code it stops working. It seems to me the only way to do it in IE is with that wierd createElement string and I guess that doesn't work in other browsers.

Best wishes....
Colin

[obsidian]

[quote author=ccx004 link=topic=113588.msg465545#msg465545 date=1163098594]
I wish this worked in IE6 but I can't get it to.
[/quote]

It works quite well, actually. You do need to keep in mind, however, that if you're trying to assign the function calls to elements that have not yet been rendered by the browser, you need to do it within a window.onload call:
[code]
< script type="text/javascript">
window.onload = function() {
  document.myForm.myButton.onclick = function() {
    alert("I've been clicked!");
  }
}
< / script>

<form name="myForm">
<input type="button" name="myButton" value="Click Me" />
</form>
[/code]

This sample works just fine in both IE and FF.

Along those same lines, here's how I would dynamically generate a button with the appropriate function call:
[code]
< script type="text/javascript">
c = document.createElement('input');
c.type = 'button';
c.value = 'Click Me!';
c.onclick = function() {
  alert("I've been clicked!");
}

window.onload = function() {
  document.getElementById('box').appendChild(c);
}
< / script>

<div id="box"></div>
[/code]

Good luck!

[fenway]

Can't you set the .value of the handler directly? Though I've never tried...