addEventListener passes on wrong parameter

Question

I want to add event listeners to some links in my menu, the parameter i is, in both cases, passed as 2, should be 0 and 1 though. Can't seem to find the problem here.

function setMode(m) {
  console.log(m);
  var mode = document.querySelectorAll('.mode');
  document.querySelector('#modus > a').innerHTML = mode[m].innerHTML;
  }


function clickAdd() {
  var elements = document.querySelectorAll('#modus div a');
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {
      setMode(i);
    });
  }
}

  <li class="dropdown" id="modus">
    <a href="#">Modus</a>
    <div class="dropdown-content">
      <a href="#" class="mode radio">ExRaid</a>
      <a href="#" class="mode radio">Trigger</a>
    </div>
  </li>

This may be helpful: https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — Marc Baumbach, Feb 11 '18 at 00:14

Mamun · Answer 1 · 2018-02-11T00:36:33.793

Declare i with let in for loop to create a block scope for i.

for (let i = 0; i < elements.length; i++) {

function setMode(m) {
  console.log(m);
  var mode = document.querySelectorAll('.mode');
  document.querySelector('#modus > a').innerHTML = mode[m].innerHTML;
  }


function clickAdd() {
  var elements = document.querySelectorAll('#modus div a');
  for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {
      setMode(i);
    });
  }
}

clickAdd();

<li class="dropdown" id="modus">
  <a href="#">Modus</a>
  <div class="dropdown-content">
    <a href="#" class="mode radio" >ExRaid</a>
    <a href="#" class="mode radio" >Trigger</a>
  </div>
</li>

OR: You can use IIFE (Immediately Invoked Function Expression):

function setMode(m) {
  console.log(m);
  var mode = document.querySelectorAll('.mode');
  document.querySelector('#modus > a').innerHTML = mode[m].innerHTML;
  }


function clickAdd() {
  var elements = document.querySelectorAll('#modus div a');
  for (var i = 0; i < elements.length; i++) {
    (function(j) {
     elements[j].addEventListener('click',function() {
          setMode(j);
     });
    })(i);
  }
}

clickAdd();

  
<li class="dropdown" id="modus">
  <a href="#">Modus</a>
  <div class="dropdown-content">
    <a href="#" class="mode radio" >ExRaid</a>
    <a href="#" class="mode radio" >Trigger</a>
  </div>
</li>

addEventListener passes on wrong parameter

1 Answers1