plain javascript boolean flag doesn't work. why?

Question

Hi,

can anyone tell me why everytime i click in the yellow button console log shows me the value false?? (should be alternately false right false right etc after every click)

where's mistake?

 var btn = document.querySelectorAll('.cdi-link'); var dropdown = document.getElementsByClassName('cdi-dropdown') for (var i = 0; i < btn.length; i++) { btn[i].addEventListener('click', function() { var button = this; var arrow = button.lastElementChild.lastElementChild; var btnColor = button.lastElementChild; var flag = true; if (flag) { flag = false; console.log(flag); } else { flag = true; console.log(flag); } }); } 

 <section class="cursos-de-ingles"> <article class="main-cdi"> <div class="cdi cdi-one"> <div class="cdi-header"> <img src="img/numero1.png" alt=""> </div> <div class="cdi-par"> <button type="button" class="cdi-link"> <div> <span>Ver detalles de cursos de Inglés General</span> <span class="arrow">&#9654;</span> </div> </button> </div> <!--cdi-par--> <img src="img/greybox.png" alt=""> </div> <!--cdi-one--> <div class="cdi cdi-two"> <button type="button" class="cdi-link"> <div> <span>Ver detalles de los cursos de Inglés Académico</span> <span class="arrow">&#9654;</span> </div> </button> </div> <!--cdi-par--> <img src="img/greybox.png" alt=""> <!--cdi-two--> <div class="cdi cdi-three"> <div class="cdi-header"> </div> <div class="cdi-par"> <button type="button" class="cdi-link"> <div> <span>Ver detalles de los cursos individuales</span> <span class="arrow">&#9654;</span> </div> </button> </div> <!--cdi-par--> <img src="img/greybox.png" alt=""> </div> <!--cdi-three--> 

Answer 1

This is because the flag is always set as true when the click happens, therefore it keeps setting itself back to false. The declaration of the flag should be moved outside of the click handler.

Answer 2

Move your flag outside of eventListener and for loop, because on every click or loop you will set the flag to true.

var btn = document.querySelectorAll('.cdi-link');
var dropdown = document.getElementsByClassName('cdi-dropdown')

var flag = true;

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() {
    var button = this;
    var arrow = button.lastElementChild.lastElementChild;
    var btnColor = button.lastElementChild;

    if (flag) {
      flag = false;
      console.log(flag);
    } else {
      flag = true;
      console.log(flag);
    }
  });
}

but if you want a different flag for different clicks use a map instead:

var btn = document.querySelectorAll('.cdi-link');
var dropdown = document.getElementsByClassName('cdi-dropdown')

var flags = {};

for (var i = 0; i < btn.length; i++) {
   btn[i].addEventListener('click', function() {
      var button = this;
      var arrow = button.lastElementChild.lastElementChild;
      var btnColor = button.lastElementChild;

      if (flag[i]) {
         flag[i] = false;
         console.log(flag[i]);
      } else {
         flag[i] = true;
         console.log(flag[i]);
      }
  });
}