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