why my array won't back to 0 (javascript)?

June 18, 2022

var a = ["red", "blue", "green"];
var i = 0
$(".button").click(function() {
  i++;
  if (i >= 3) {
    i = 0;
  }
  console.log(i);
  $("body").addClass(a[i]);
  console.log(a[i]);
});

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="button">Click</button>

It can turn from white to blue and green, but if i click the button again it won’t turn to red, blue, and green. But the console show 1,2,0,1,2,0 and also the color blue, green, red, blue

>Solution :

Your issue is that you’re not ever removing the old class, so eventually the body has all three classes and it just uses the last one. Add

$("body").removeClass(a[i]);

to the beginning of your click handler:

var a = ["red", "blue", "green"];
var i = 0
$(".button").click(function() {
  $("body").removeClass(a[i]);
  i++;
  if (i >= 3) {
    i = 0;
  }
  console.log(i);
  $("body").addClass(a[i]);
  console.log(a[i]);
});

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <button type="button" class="button">Click</button>
</body>