Why on clicking different buttons same Array value appears? [duplicate]

Question

Consider the below code :

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>
<button id="btn-3">Button 4!</button>
<script type="text/javascript">
    var prizes = ['Watch','A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
    for (var btnNum = 0; btnNum < prizes.length-1; btnNum++) {
        // for each of our buttons, when the user clicks it...
        document.getElementById('btn-' + btnNum).onclick = function() {
            // tell her what she's won!
            alert(prizes[btnNum]);
        };
    }
</script>

I wanted it to work as on clicking different buttons, different array values should get appeared. But it alerts only "Fresh Laundry", whichever button is clicked. I'm not getting what's the issue here? Why every function expression assigned through for loop refers to the last element of prizes Array?

It's because all closures refer to the same btnNum variable. — giorgiga
– giorgiga, Commented Feb 22, 2018 at 11:59

void · Accepted Answer · 2018-02-22 12:00:15Z

2

When you will click the value of btnNum will be the last value for all the click event handlers. So your events need to get the correct value.

You can put your event listener inside an Immediately Invoked Function Expression passing the value of btnNum.

var prizes = ['Watch', 'A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
for (var btnNum = 0; btnNum < prizes.length - 1; btnNum++) {
  (function(el) {
    document.getElementById('btn-' + el).onclick = function() {
      alert(prizes[el]);
    };
  })(btnNum);
}

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>
<button id="btn-3">Button 4!</button>

answered Feb 22, 2018 at 12:00

void

36.8k10 gold badges72 silver badges111 bronze badges

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

2 Comments

T.J. Crowder Over a year ago

You know this is one of the most often-duplicated questions in the JavaScript tag. Why answer it rather than pointing to the previous answers?

void Over a year ago

@T.J.Crowder Makes sense. Noted.

Collectives™ on Stack Overflow

Why on clicking different buttons same Array value appears? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related