How do I define a button element's onclick attribute using just JavaScript?

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")

Possible duplicate of How do you assign a JavaScript 'onclick' attribute dynamically? — Heretic Monkey
– Heretic Monkey, Commented Mar 7, 2018 at 18:32

rafaelgomesxyz · Accepted Answer · 2018-03-07 18:29:02Z

1

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);

answered Mar 7, 2018 at 18:29

rafaelgomesxyz

1,40510 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Ezzati · Accepted Answer · 2018-03-07 18:28:10Z

1

Try this

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

answered Mar 7, 2018 at 18:28

Mike Ezzati

3,1761 gold badge25 silver badges34 bronze badges

Comments

Luple · Accepted Answer · 2018-03-07 18:27:46Z

0

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(){...}

answered Mar 7, 2018 at 18:27

Luple

4916 silver badges22 bronze badges

2 Comments

KRLW890 Over a year ago

I left the click function out for simplicity, but yes, it is defined.One thing that really stumps me is how in the HTML, you can define it as "click(this);", where you give it a function and can pass a variable. The only way I can think this could be replicated in JS would be to also use quotations, since passing the actual function (b.onclick=click;) would make it impossible to pass that variable, and trying to do this: b.onclick=click(this); would run the function there and give the onclick attribute the return value of the function.

KRLW890 Over a year ago

PS, declaring the function right there would be the same as doing b.onClick=click;. Which is where the other points came from.

Doug · Accepted Answer · 2018-03-07 18:36:10Z

0

(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 );
}

answered Mar 7, 2018 at 18:36

Doug

1,5251 gold badge14 silver badges27 bronze badges

Collectives™ on Stack Overflow

How do I define a button element's onclick attribute using just JavaScript?

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related