Adding onclick event handler to dynamically added button?

Question

I am adding a button dynamically to HTML as shown below.

When clicking that button I want to call a JavaScript function.

var but = document.createElement("button");

but.value="delete row";

but.setAttribute("onclick","callJavaScriptFunction()");
// this is not working

but.onclick="callJavaScriptFunction()"
// this is also not working

document.getElementById("but").onclick="callJavaScriptFunction()"
// this is also not working

but.id="but"+inc;

How can this be resolved?

Answer 1

try this:

but.onclick = callJavascriptFunction;

or create the button by wrapping it with another element and use innerHTML:

var span = document.createElement('span');
span.innerHTML = '<button id="but' + inc +'" onclick="callJavascriptFunction()" />';

Answer 2

Remove the () from your expressions that are not working will get the desired results you need.

but.setAttribute("onclick",callJavascriptFunction);
but.onclick= callJavascriptFunction;
document.getElementById("but").onclick=callJavascriptFunction;

Answer 3

This code work good to me and look more simple. Necessary to call a function with specific parameter.

var btn = document.createElement("BUTTON");  //<button> element
var t = document.createTextNode("MyButton"); // Create a text node
btn.appendChild(t);   

btn.onclick = function(){myFunction(myparameter)};  
document.getElementById("myView").appendChild(btn);//to show on myView

Answer 4

Try
but.addEventListener('click', yourFunction) Note the absence of parantheses () after the function name. This is because you are assigning the function, not calling it.

Answer 5

but.onclick = function() { yourjavascriptfunction();};

or

but.onclick = function() { functionwithparam(param);};

Answer 6

I was having a similar issue but none of these fixes worked. The problem was that my button was not yet on the page. The fix for this ended up being going from this:

//Bad code.
var btn = document.createElement('button');
btn.onClick = function() {  console.log("hey");  }

to this:

//Working Code.  I don't like it, but it works. 
var btn = document.createElement('button');
var wrapper = document.createElement('div');
wrapper.appendChild(btn);

document.body.appendChild(wrapper);
var buttons = wrapper.getElementsByTagName("BUTTON");
buttons[0].onclick = function(){  console.log("hey");  }

I have no clue at all why this works. Adding the button to the page and referring to it any other way did not work.

Answer 7

Try this:

var inputTag = document.createElement("div");              
inputTag.innerHTML = "<input type = 'button' value = 'oooh' onClick = 'your_function_name()'>";    
document.body.appendChild(inputTag);

This creates a button inside a DIV which works perfectly!

Answer 8

but.onclick = callJavascriptFunction;

no double quotes no parentheses.

Answer 9

Using modern JavaScript, this solution works well:

let btn = document.getElementById("btnID");
btn.onclick = () => {onAction(url, method);};

Answer 10

for me this works!

button.onclick = () => (removechore());