How to use the function attribute as an attribute of the onclick event (input element)?

Question

Let's say I have the code below:

function addValue(x){

    var button = document.createElement( "input" );
    button.setAttribute("type", "submit");
    button.setAttribute("src", "images/repeatStageIcon.png");
    button.setAttribute("class", "option-image");
    button.setAttribute("title", "Repeat Current Stage!");

    //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
    button.setAttribute("onclick", "createRepeatStage( x )");

    var p = document.getElementById("myDiv");
    p.appendChild(button);
}

function createRepeatStage( thisX ){
   alert(thisX);
}

addValue(6);

<html>

  <body>
  
     <div id="myDiv"></div>
  </body>
</html>

QUESTION:

How to pass the x attribute in the onclick event so that when the method createRepeatStage(x); is called, the x value would be passed in that method?

Possible duplicate of [Javascript event handler with parameters](https://stackoverflow.com/questions/10000083/javascript-event-handler-with-parameters) — Dexygen, Feb 19 '19 at 19:17
An efficient way to do it. Although is not necessary in my case, as I want something simple. Thanks though for your answer @GeorgeJempty — Loizos Vasileiou, Feb 19 '19 at 19:32
Possible duplicate of [How to Set OnClick attribute with value containing function in ie8?](https://stackoverflow.com/questions/1019078/how-to-set-onclick-attribute-with-value-containing-function-in-ie8) — Michelangelo, Feb 19 '19 at 19:50

Raphael Rafatpanah · Accepted Answer · 2019-02-19T19:46:04.923

You could wrap the handler in another function.

button.addEventListener("click", function(event) {
  createRepeatStage(x);
});

The value of x will be preserved by the closure.

Note, I've used addEventListener instead of setAttribute.

function addValue(x){

    var button = document.createElement( "input" );
    button.setAttribute("type", "submit");
    button.setAttribute("src", "images/repeatStageIcon.png");
    button.setAttribute("class", "option-image");
    button.setAttribute("title", "Repeat Current Stage!");

    //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
    button.addEventListener("click", function(event) {
      createRepeatStage(x);
    });

    var p = document.getElementById("myDiv");
    p.appendChild(button);
}

function createRepeatStage( thisX ){
   alert(thisX);
}

addValue(6);

<html>
  <body>
     <div id="myDiv"></div>
  </body>
</html>

Using bind

If, for some reason, you're against wrapping your handler in a function, you can take advantage of bind.

function addValue(x){
    var button = document.createElement( "input" );
    button.setAttribute("type", "submit");
    button.setAttribute("src", "images/repeatStageIcon.png");
    button.setAttribute("class", "option-image");
    button.setAttribute("title", "Repeat Current Stage!");

    //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
    button.addEventListener("click", createRepeatStage.bind(null, x));

    var p = document.getElementById("myDiv");
    p.appendChild(button);
}

function createRepeatStage( thisX ){
   alert(thisX);
}

addValue(6);

<html>
  <body>
     <div id="myDiv"></div>
  </body>
</html>

@LoizosVasileiou I've also added an example using `bind`, but I would personally use the first example. — Raphael Rafatpanah, Feb 19 '19 at 19:37

score 2 · Answer 2 · answered Feb 19 '19 at 19:32

In fact, there are two things to fix in your page.

you cannot evaluate the addValue function before the page loads, since there would be no myDiv element. A standard way to execute code after the page is loaded is to use the onLoad attribute in the body element. That is:

    <body onload="addValue(6)">
        <h1>Hola</h1>

        <div id="myDiv"></div>
    </body>

how to indicate to the new button the "onclick" handler. You can just assign the onclick attribute of the button:

            function addValue(x){

                var button = document.createElement( "input" );
                button.setAttribute("type", "submit");
                button.setAttribute("class", "option-image");
                button.setAttribute("title", "Repeat Current Stage!");

                //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
                button.onclick = () => createRepeatStage( x );

                var p = document.getElementById("myDiv");
                p.appendChild(button);
            }

Note that you can pass an arrow function, it is a compressed form ... though it could not work on (really) older browsers. To be sure that your code runs everywhere, you can use the "traditional" function syntax

            function addValue(x){

                var button = document.createElement( "input" );
                button.setAttribute("type", "submit");
                button.setAttribute("class", "option-image");
                button.setAttribute("title", "Repeat Current Stage!");

                //HOW TO PASS X AS AN ONCLICK ATTRIBUTE?
                button.onclick = function() { createRepeatStage( x ) };

                var p = document.getElementById("myDiv");
                p.appendChild(button);
            }

Hope it helps - Carlos

PS: possibly the other button settings could/should be replaced by direct attribute assignment - Carlos

Even better way for my example. I didnt know about arrow functions. Thanks @Carlos Lombardi — Loizos Vasileiou, Feb 19 '19 at 19:55
To be honest the arrow function works for me where the "traditional syntax" is not. I use Google Chrome Version 72.0.3626.109 — Loizos Vasileiou, Feb 19 '19 at 20:19

How to use the function attribute as an attribute of the onclick event (input element)?

2 Answers2

Using bind