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

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" >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

CodePudding user response：

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" >Click</button>
</body>

CodePudding user response：

Since you are using jquery you should be using like $("body").attr('class',a[i]); addClass will be adding all he classes after click.attr will add 1 class at a time.

var a=["red","blue","green"];
var i=0
$(".button").click(function(){
  i  ;
  if(i>=3){
    i=0;
  }
 console.log(i);
 $("body").attr('class',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.0/jquery.min.js"></script>


<button type="button" >Click</button>

CodePudding user response：

This one will add and remove the different colour classes to and from the document and will not affect any other document classes that might have been assigned before.

const a = ["red", "blue", "green"];
a.i=-1;a.col=function(){const cl=document.body.classList;
 cl.remove(this[this.i  ]);
 cl.add(this[this.i%=3]);
 console.log(this.i,this[this.i]);
};

document.querySelector(".button").onclick=ev=>a.col();

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<button type="button" >Click</button>

CodePudding user response：

Change $("body").addClass(a[i]); to document.body.className = a[i];

And you don't need jQuery.

Like so:

var a = ["red", "blue", "green"];
var i = 0
document.querySelector(".button").addEventListener( 'click', function() {
  i  ;
  if (i >= 3) {
    i = 0;
  }
  console.log(i);
  document.body.className = a[i];
  console.log(a[i]);
});

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<button type="button" >Click</button>