How do I get a created element (a button) to run a function?

Question

This is the code I used to create the button:

var dfom = document.createElement('div');
dfom.setAttribute("id","options");
dfom.innerHTML = "<input type=\"button\" value=\"Say HI\" onclick=\get()\ />";
dfom.style.padding = '10px';
document.body.insertBefore(dfom, document.body.firstChild);

The button is created fine; it displays correctly. So to test it, I did this:

function get()
{
alert("HI");
}

However, when I click the button nothing happens. Any help, please? Thanks!

You should use `firstChild` instead of `children[0]`. – VisioN Mar 26 '13 at 22:45 — VisioN, Mar 26 '13 at 22:45
Ha, thanks...still doesn't fix my bigger problem though. – MathMan08 Mar 26 '13 at 22:49 — MathMan08, Mar 26 '13 at 22:49
Is your code running **after** the body element exists? – RobG Mar 26 '13 at 22:54 — RobG, Mar 26 '13 at 22:54

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

The function name should also be in quotes, i.e. onClick="get();". Also read up on Event Listeners whenever you get the time, for instace here.

edited May 23 '17 at 11:57

Community

1
1

answered Mar 26 '13 at 22:42

Milo Wielondek

4,164
3
33
45

Doing so didn't help. I change it to this: dfom.innerHTML = ""; – MathMan08 Mar 26 '13 at 22:48
+1 — but capitalisation of attribute names is irrelevant. ;-) – RobG Mar 26 '13 at 22:49
@RobG old habits die hard ;) – Milo Wielondek Mar 26 '13 at 22:51
@user2213591 it definitely should. How did you implement your `get()` function? – Milo Wielondek Mar 26 '13 at 22:53
That was the problem :P THANKS! – MathMan08 Mar 28 '13 at 04:28

score 1 · Answer 2 · answered Mar 26 '13 at 22:53

If you want to write correct JavaScript code, then you should do it as follows:

var dfom = document.createElement("div"),
    button = document.createElement("input");

button.type = "button";
button.value = "Say HI";
button.addEventListener("click", function() {
    alert("HI");
}, false);

dfom.id = "options";
dfom.style.padding = "10px";
dfom.appendChild(button);

document.body.insertBefore(dfom, document.body.firstChild);

DEMO: http://jsfiddle.net/TKdYh/

@user2213591 Not yet a god :) but it's never late to learn good programming style. — VisioN, Mar 26 '13 at 22:59

Explosion Pills · Accepted Answer · 2013-03-26T23:08:46.083

1

The \ should be \" around get(), but there are more considerations: namely the get function actually has to be defined outside of onload or another callback since it needs to be available globally. You would need a setup similar to this:

http://jsfiddle.net/CZ2y4/

...which defines get outside of the onLoad callback, which makes it available to onclick.

Also, use standard event bindings rather than onclick:

dfom.innerHTML = "<input type=\"button\" value=\"Say HI\">";
dfom.firstChild.addEventListener('click', get);

http://jsfiddle.net/CZ2y4/1/

edited Mar 26 '13 at 23:08

answered Mar 26 '13 at 22:57

Explosion Pills

188,624
52
326
405

... and try to avoid `innerHTML`, since it is damned slow. – VisioN Mar 26 '13 at 23:01
1

+1 it was the backslashes without following double quotes that was the issue. The statement `the get function actually has to be defined before the element creation` is incorrect, a function definition will always be processed before any code is run, so it will always be defined before the button is created (if the button is created by code, as it is). – RobG Mar 26 '13 at 23:04
@VisioN—do you have anything to backup that assertion? – RobG Mar 26 '13 at 23:06
@RobG You're right; I think that if the function is defined in `onLoad` it would not be available globally hence this problem: http://jsfiddle.net/CZ2y4/2/ – Explosion Pills Mar 26 '13 at 23:08

score 0 · Answer 4 · answered Mar 26 '13 at 23:02

The following works for me:

window.onload = function() {
  var dfom = document.createElement('div');
  dfom.id = "options";
  dfom.innerHTML = '<input type="button" value="Say HI" onclick="get()">';
  dfom.style.padding = '10px';
  document.body.insertBefore(dfom, document.body.children[0]);
}

function get() {
  alert("HI");
}

Some things to note:

For standard DOM properties, it's usually better to just set the property, don't use setAttribute as it is inconsistently implemented.
It's clearer to use single quotes for script and double quotes for makrup, that way you don't have to use as many backslashes to quote quotes
Strictly, HTML attribute values only need to be quoted if they contain certain characters. It's easier to just quote them all rather than remember what that set of characters is. Browsers are also very tolerant so you can get away with unquoted characters that should be quoted in some browsers but not others.

Thank you, Rob. I will remember this next time. – MathMan08 Mar 28 '13 at 04:29 — MathMan08, Mar 28 '13 at 04:29

How do I get a created element (a button) to run a function?

4 Answers4