javascript - Onclick event triggering onload for button - Stack Overflow

admin管理员组

文章数量:1312991

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

Share Improve this question Follow edited Jul 30, 2022 at 8:20 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 2, 2015 at 18:39 Honinbo ShusakuHoninbo Shusaku 1,52133 gold badges2828 silver badges4747 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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>

本文标签： javascriptOnclick event triggering onload for buttonStack Overflow