如何仅使用JavaScript定义按钮元素的onclick属性？

Question

As it says in the title, I'm trying to create a button element in JavaScript, but when I try to set its onclick attribute, it just ignores it. I've looked at other questions with this topic on this site (such as this one ), but everyone answers to put it in with HTML, like so:

<button id="buttonid" onclick="click(this);">

But my program dynamically creates the HTML buttons entirely with JavaScript (they're aligned on a table, so using a for loop is very useful. Plus I'm more familiar with JavaScript). Like this:

var b = document.createElement("button");
b.id = "buttonid";
b.onClick = "click(this);"; //I've tried many variations with no success
document.appendChild(b);

The button element is never declared in the HTML. I need a way to add the onclick attribute using JavaScript alone. I'm not very experienced with JQuery, so I would prefer just JavaScript.

Thank you in advance.

PS, I've tried all the following methods with both lowercase .onclick and camelcase .onClick :

b.onClick = "click(this);"; //just simply doesn't work
b.onClick = click(this);    //actually runs the program there, with some ambiguous "this" object
b.onClick = click;          //passes the actual function, but disallows the ability to pass the button's object (via "this")

Answer 1

Try this

  var b = document.createElement("button"); b.onClick = function(){ alert("on click handler"); }; 

Answer 2

You can use addEventListener to add the listener to the button and bind to pass the button as this for the handler function.

b.addEventListener(`click`, click.bind(b));

Or if you want to use onClick , just use bind :

b.onClick = click.bind(b);

Answer 3

Try b.onClick = function(){ console.log("test"); }

I am not sure what your "click" function is. Maybe it isn't declared yet or something. Or what is happening is your function is named click "function click(){...}" which instead needs to be click = function(){...}

Answer 4

---

 (function(){ // create the button var buttonB = document.createElement('button'); buttonB.id = 'buttonB'; var textB = document.createTextNode('Button B'); buttonB.appendChild( textB ); // set the click event on the button buttonB.addEventListener('click', function(){ // console.log('test'); // console.log( this ); clickFunc( this ); }); // populate the DOM-body with the button document.body.appendChild( buttonB ); })(); function clickFunc( that ){ console.log( that ); }