David Jawphan David Jawphan - 1 year ago 60
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

array value in every 3 seconds .eg
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
array value in every times called.

<style type="text/css">
div {
width: 100%;
height: 20%;
position: relative;
background: #fff;

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];
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
// }


Answer Source

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.



<!DOCTYPE html>

 div {
   width: 100%;
   height: 20vh;
   border: 1px solid #fff;
   background: #555;

      //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
        //x is the last element of color Array
        var x = color[4];
        //Remove x from the back of color Array 
        //Place x to the front of color Array 
      //Do it again in 3 seconds
    }, 3000);