I have a div, and I want to append a button created with JS to it, with JS defining the ID, onclick, as well as the text. Everything works fine, except for the onclick event triggers on page load instead of when clicked. When inspected, there isn't even a onclick attribute.

Here is an example:

function createEditButton(num) {
    var btn = document.createElement("button");
    btn.onclick = myFunc();
    btn.type = "button";
    btn.innerText = "Edit";
    btn.id = "editbutton" + num;
    return btn;
}

function myFunc() {
    alert("hi");
    
}

document.getElementById('someDiv').appendChild(createEditButton(5));

<div id="someDiv"> </div>

I have a div, and I want to append a button created with JS to it, with JS defining the ID, onclick, as well as the text. Everything works fine, except for the onclick event triggers on page load instead of when clicked. When inspected, there isn't even a onclick attribute.

Here is an example:

function createEditButton(num) {
    var btn = document.createElement("button");
    btn.onclick = myFunc();
    btn.type = "button";
    btn.innerText = "Edit";
    btn.id = "editbutton" + num;
    return btn;
}

function myFunc() {
    alert("hi");
    
}

document.getElementById('someDiv').appendChild(createEditButton(5));

<div id="someDiv"> </div>

I have even tried adding the event using addEventListener: btn.addEventListener("click", showEditFields(event), false); and it results in the same. I'm not understanding what I'm doing wrong.

• javascript
• html
• jquery
• jquery-events

3 Answers 3

While registering btn.onclick as a click callback you are executing function instead of assigning it. you should use addEventListener method to register click events instead of onclick, the benefits of using addEventListener are it can easily register multiple callback while if suppose you are assigning 'onclick' value twice the first value will get replaced.

And to pass value to function you can use bind function. bind will create new function with given context and arguments bound to it. or you can simply create a wrapper function which will execute the call back function with given arguments.

Bind: MDN Docs

See the below example.

function createEditButton(num) {
  var btn = document.createElement("button");
  btn.addEventListener('click', myFunc);

  // Using Bind to pass value
  btn.addEventListener('click', myFuncWithVal.bind(btn, num));


  // Uaing Wrapper function to pass value
  btn.addEventListener('click', function(event) {
    alert('wrapper function');
    myFuncWithVal(num);
  });

  btn.type = "button";
  btn.innerText = "Edit";
  btn.id = "editbutton" + num;
  return btn;
}

function myFunc() {
  alert("hi");
}


function myFuncWithVal(val) {
  alert(val);
}

document.getElementById('someDiv').appendChild(createEditButton(5));

<div id="someDiv"></div>

It's b/c you are calling the function instead of referencing it:

btn.onclick = myFunc(); /* <-- remove parens */

btn.onclick = myFunc;

function createEditButton(num) {
	var btn = document.createElement("button");
	btn.onclick = myFunc;
	btn.type = "button";
	btn.innerText = "Edit";
	btn.id = "editbutton" + num;
	return btn;
}

function myFunc() {
    alert("hi");
    
}

document.getElementById('someDiv').appendChild(createEditButton(5));

<div id="someDiv"> </div>