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 — Dexygen
– Dexygen, Commented Feb 19, 2019 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
– Loizos Vasileiou, Commented Feb 19, 2019 at 19:32
Possible duplicate of How to Set OnClick attribute with value containing function in ie8? — Michelangelo
– Michelangelo, Commented Feb 19, 2019 at 19:50

Raphael Rafatpanah · Accepted Answer · 2019-02-19 19:46:04Z

2

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>

edited Feb 19, 2019 at 19:46

answered Feb 19, 2019 at 19:18

Raphael Rafatpanah

20.2k28 gold badges106 silver badges176 bronze badges

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

2 Comments

Loizos Vasileiou Over a year ago

very logical answer. Thanks a lot @Raphael Rafatpanah

Raphael Rafatpanah Over a year ago

@LoizosVasileiou I've also added an example using bind, but I would personally use the first example.

Carlos Lombardi · Accepted Answer · 2019-02-19 19:32:32Z

2

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

answered Feb 19, 2019 at 19:32

Carlos Lombardi

3692 silver badges9 bronze badges

2 Comments

Loizos Vasileiou Over a year ago

Even better way for my example. I didnt know about arrow functions. Thanks @Carlos Lombardi

Loizos Vasileiou Over a year ago

To be honest the arrow function works for me where the "traditional syntax" is not. I use Google Chrome Version 72.0.3626.109

Collectives™ on Stack Overflow

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

2 Answers 2

Using bind

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Using bind

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related