Every 3 seconds, I need to change the background color of each div. To do this, I attempted to modify the values in the color array every 3 seconds. For example, the value at index 0 (which is "red") would move to index 1, then the value at index 1 would move to index 2, and so on. Finally, the value at index 4 would always be set to index 0's value. The issue is that I couldn't achieve this new edited array. How can I properly edit the color array values with each call?
<style type="text/css">
div {
width: 100%;
height: 20%;
position: relative;
background: #fff;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var div = document.getElementsByTagName("div");
var color = ["red","green","pink","blue","lightblue"];
function change(){
for(var i in color){
var j = parseInt(i);
j !== 4 ? color[j+1].Key = color[j] : color[0].Key = color[j];
}
changediv();
}
function changediv () {
for(var d = 0 ; d < div.length; d ++){
div[d].style.background = color[d];
}
}
setInterval(change,3000);
</script>