How to add arguments to onclick in javascript? - Stack Overflow

admin管理员组

文章数量:1326104

Basically, when a button is pressed I want an argument to be supplied with it but this does not work:

var button = document.getElementById("button");
button.onClick = doThis(arg);

but this does work (without arguments):

var button = document.getElementById("button");
button.onClick = doThis;

The reason why the first example doesn't work it because the function automatically runs without waiting for the click.

How do I supply arguments onClick?

Basically, when a button is pressed I want an argument to be supplied with it but this does not work:

var button = document.getElementById("button");
button.onClick = doThis(arg);

but this does work (without arguments):

var button = document.getElementById("button");
button.onClick = doThis;

The reason why the first example doesn't work it because the function automatically runs without waiting for the click.

How do I supply arguments onClick?

• javascript
• onclick
• arguments

Share Improve this question Follow asked Nov 3, 2015 at 7:32 mre12345mre12345 1,12744 gold badges1616 silver badges2424 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

First, note that it's onclick, not onClick. Both work on major browsers, but the former is the correct capitalization. (See here and here in the HTML specification, including the code example.)

You have a couple of choices:

1. Use Function#bind:

   button.onclick = doThis.bind(button, arg);
   

   Function#bind creates a new function that, when called, will call the original with a specific this value (the first argument, button in our case) and any arguments you give it (followed by any arguments the new function is called with).

2. Use a wraper function:

   button.onclick = function() { doThis(arg); };
   

   within the above, though, this in doThis will not be the button. If you want it to be, you can use Function#call:

   button.onclick = function() { doThis.call(button, arg); };
   // or
   button.onclick = function() { doThis.call(this, arg); };
   

   Function#call calls a function, specifying the this value to use, along with the arguments to pass to it.

You could do it like this using an anonymous function.

document.getElementById("button").onClick = function() { doThis(arg); };

You can do it well using addEventListener in JavaScript. HTML5 data-attributes and DOMStringMap can be utilized to extend it further.

Below code snippet should give you fair idea of using arguments with any HTMLDomEvents.

el.addEventListener('click', function(e) {
  performAction(e, this);
});

var elContainer = document.querySelector('#myDiv');
var el = document.querySelector('#searchNow');

el.addEventListener('click', function(e) {
  performAction(e, this);
});

function performAction(e, thatObj) {
  var str = '' + e.type + '\n';
  for (x in thatObj.dataset) {
    str += x + ': ' + thatObj.dataset[x] + '\n';
  }

  console.log(e.type + thatObj.dataset);
  elContainer.innerHTML += str;

}

#myDiv {
  margin: 5px 0;
  padding: 5px;
  border: 1px solid #CCC;
}

<div id="myDiv">
  My DIV...
  <br/>
</div>

<button name='search' id='searchNow' data-propertiesObject='{a: "XYZ", b: "ABC"}'>Search Now!</button>

本文标签： How to add arguments to onclick in javascriptStack Overflow