Javascript - onclick function being invoked without calling it first

Question

I am doing some exercises in javascript with closures, and I have played around with this example, where I was supposed to create buttons and the on clicking them alert their number:

function addButtons(numButtons) {   
    for (var i = 0; i < numButtons; i++) {     
    var button = document.createElement('input');     
    button.type = 'button';     
    button.value = 'Button ' + (i + 1);     
    button.onclick = function() {       
        alert('Button ' + (i + 1) + ' clicked');     
    }(i);  
    document.body.appendChild(button);
    document.body.appendChild(document.createElement('br'));   
    } 
}; 

addButtons(5);

But, on page load, script is alerting button numbers even before they were created, why is that so? I have tried with swaping the onclick method for addEventListener like so:

button.addEventListener("click", function () {   
        alert('Button ' + (i + 1) + ' clicked');     
}(i));

But the result was the same.

Luka Kvavilashvili · Accepted Answer · 2017-02-23 13:13:58Z

1

The problem is with this line

button.onclick = function() {       
    alert('Button ' + (i + 1) + ' clicked');     
}(i);

Which means that you are creating a function() {} and once that function is created, because of the brackets at the end, that function gets executed straight away.

Just change it to:

button.onclick = function() {       
    alert('Button ' + (i + 1) + ' clicked');     
};

EDIT:

By the way, using i variable in the click handler will always output the last iteration number. Because in the onclick function you are referring to the i variable, which when the click will occur, will be 6 (since all the iterations will be done at that time).

So if you want to output the button number, you can use:

button.onclick = function() {
    // this means the current button that was clicked
    alert(this.value + ' clicked');     
};

edited Feb 23, 2017 at 13:13

answered Feb 23, 2017 at 13:08

Luka Kvavilashvili

1,38910 silver badges13 bronze badges

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

6 Comments

Leff Over a year ago

Yes, but I added it to attach the current ì state to it, because this way, it will be number 6 for all buttons.

Luka Kvavilashvili Over a year ago

See my updated answer. And by the way, adding (i) at the end, doesn't actually make it alert the right number. Since the onclick function is executed straight away, the i variable is still the number of the button. Even if you removed the i, and just called it using (), it would still output the right number.

Leff Over a year ago

Thank you for your answer. I know it wasn't part of my question, but could you explain the difference or more explicitly this solution of the same problem here . What I don't understand in that example is the argument passed to onclick function. Where does that x comes from? I would be very grateful for that.

Luka Kvavilashvili Over a year ago

Yes. The functions have variables called arguments. Those are variables that you can pass to the function. Here's an example jsfiddle.net/wguq6ron

Luka Kvavilashvili Over a year ago

And as you can see in your example, the function is created with an x argument, function (x) { }, and at the end the function is called and passed the i variable, function (x) { }(i), so the value of x will be the current value of i (by current, i mean at this point of the loop)

|

Luan Nico · Accepted Answer · 2017-02-23 13:06:54Z

1

Remove the invocation:

button.onclick = function() {       
    alert('Button ' + (i + 1) + ' clicked');     
}(i);   // here: (i)

Change to:

button.onclick = function() {       
    alert('Button ' + (i + 1) + ' clicked');     
}

You are invoking the fn yourself ;)

answered Feb 23, 2017 at 13:06

Luan Nico

6,0533 gold badges33 silver badges63 bronze badges

1 Comment

Leff Over a year ago

But, then it will always be number 6. That is why I added i.

Suchit kumar · Accepted Answer · 2017-02-23 13:15:48Z

1

Remove () from the last of the function to avoid self call.

You can add a custom field and get the text from there.Try below:

function addButtons(numButtons) {   
    for (var i = 0; i < numButtons; i++) {     
    var button = document.createElement('input');     
    button.type = 'button';     
    button.value = 'Button ' + (i + 1); 
    button.number=i+1;
    button.onclick = function() {       
        alert(this.number);     
    };  
    document.body.appendChild(button);
    document.body.appendChild(document.createElement('br'));   
    } 
}; 
addButtons(5);

answered Feb 23, 2017 at 13:15

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

3 Comments

Leff Over a year ago

Thank you for your answer. I know it wasn't part of my question, but could you explain the difference or more explicitly this solution of the same problem here . What I don't understand in that example is the argument passed to onclick function. Where does that x comes from? I would be very grateful for that.

Suchit kumar Over a year ago

@Leff it is the value of i passed through (i).

Leff Over a year ago

Oh, of course, thank you so much for the explanation!

Collectives™ on Stack Overflow

Javascript - onclick function being invoked without calling it first

3 Answers 3

6 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related