Button event handler

sachingoel0101 · July 5th, 2012, 06:39 AM

I am new at learning javascript but i was making some sort of ajax application and got stuck.It's got to do something with this code.I want the code to work in a way when i click on 'Click to generate a new button',it should generate a new button and on clicking on the newly created button,the function hola() gets executed.But instead right after clicking the first button,the function hola() gets executed along with appearance of the new button.But after then,the new button is just useless,i.e.,it has no onclick handler attached to it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function newButton() {
var button = document.createElement("button");
button.innerHTML = "Click Me";
button.onclick = hola();
document.getElementById('x').appendChild(button);
}
function hola() {
alert('clicked me');
}
</script>
</head>
<body>
<div id="x"></div>
<button onclick="newButton()">Click to generate a new button</button>
</body>
</html>

joefawcett · July 5th, 2012, 06:46 AM

I would change the line where you assign the handler to remove the parentheses so that you assign a function, not the results of a function:

Code:

button = hola;

You might also try assigning the handler after you have added the button to the document.

You might also want to rewrite the code to use a cross-browser library. jQuery has cross-browser support for creating elements and assigning handlers.

sachingoel0101 · July 5th, 2012, 06:51 AM

ok yeah got it!!
But what if the function requires some parameters.
Like i add this new button to a div element with some id and the action i want on clicking is to delete that div element.For that i have a deleteDiv function which require id of element as a parameter.

joefawcett · July 5th, 2012, 06:57 AM

Then you can try setAttribute:

Code:

button.setAttribute("onclick", "hola('myText');");

You just need to be careful with quotes and make sure that variables will be available when the function is called.

sachingoel0101 · July 5th, 2012, 07:02 AM

Well i tried that too.But it does not work.Either the function executes before i intend it to or does not operate at all.