David Jawphan David Jawphan - 5 months ago 15
jQuery Question

Need to change div background every 3 seconds?

I have to change div background color in every 3 seconds ,so as below I tried to change

color
array value in every 3 seconds .eg
color
index 0 of "red" will move to index 1,then index 1 value move to index 2...So I set last index 4 to always index 0 of value.The problem is that I didn't get that new edit array.How to edit
color
array value in every times called.

<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];
}
//can u also explain why using for in loop is getting additional value .see console.log output
//for(var i in div){
// div[i].style.background = color[i];
// console.log(i); // 0,1,2,3,4,length,item,callItem
// }
}

setInterval(change,3000);
</script>

Answer

My solution is clunky but it works and I made it easy to follow (I think). It's commented step by step.

OP: can u also explain why using for in loop is getting additional value?

Well I've read that for in loops should be used to iterate through objects because there's no guarantee that the result will be in the correct order. So if you use for in to iterate through an array, most likely it'll return in a different order which basically makes an array like an object but less useful since one of the fundamental strength of an array is it's ordered index.

When you are getting an extra value, it's because for in will interpret an array and not only give you it's contents: 0,1,2,3,4, but it'll enumerate properties as well: length,item,callItem. I don't know any circumstances when you need all of that mucking things up. Actually, div is just a NodeList, if it was an array, you'd have a bigger list of properties.

Plunker

Snippet

<!DOCTYPE html>
<html>

  <head>
 <style>
 div {
   width: 100%;
   height: 20vh;
   border: 1px solid #fff;
   background: #555;
 }
 </style>
  </head>

  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    
    <script>
      //Declare color Array
      var color = ["red","green","pink","blue","lightblue"]; 
      
    //Function takes one argument
    function fill(color) {
      
      //Collect all divs and make a NodeList
      var divList = document.querySelectorAll('div');
      
      //Make the NodeList an Array
      var divArray = Array.prototype.slice.call(divList);
        
        //Iterate through divArray
        for(var i = 0; i < divArray.length; i++) {
          
          //Each iteration of divArray is matched to an element of color
          var div = divArray[i];
          var bg = color[i];
          
          //Set each background of div to the corresponding color in color Array
          div.style.backgroundColor = bg;
        }
      }
    

    setInterval(function() {

      
        //Call fill with the given Array color
        fill(color);
        
        //x is the last element of color Array
        var x = color[4];
      
        //Remove x from the back of color Array 
        color.pop(x);
      
        //Place x to the front of color Array 
        color.unshift(x);
      
      //Do it again in 3 seconds
    }, 3000);  
    
    </script>
  </body>

</html>