Why is only two of my self color changing divs working?-CodePudding

So only two of my divs are working and changing colors and the other two are spinning but not changing colors. I tried a lot of things but it's still not working. I'm new to coding, so I'm sorry if I missed anything. I want all four of them to self-change colors. Here is my code. I would be thankful if you could help me.

<head>
  <style>
    body {
      background-color: black;
    }
    
    .div {
      height: 200px;
      width: 200px;
      background-color: red;
      animation-name: spin;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    .div2 {
      height: 200px;
      width: 200px;
      background-color: rgb(0, 127, 255);
      animation-name: spin;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    .div3 {
      height: 200px;
      width: 200px;
      background-color: rgb(9, 255, 0);
      animation-name: spin2;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    .div4 {
      height: 200px;
      width: 200px;
      background-color: gold;
      animation-name: spin2;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    @keyframes spin2 {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(-360deg);
      }
    }
    
    .center {
      position: absolute;
      left: 10%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    .center2 {
      position: absolute;
      left: 30%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    .center3 {
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    .center4 {
      position: absolute;
      left: 70%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    #div {
      transition: 1s;
    }
    
    #div2 {
      transition: 1s;
    }
    
    #div3 {
      transition: 1s;
    }
    
    #div4 {
      transition: 1s;
    }
  </style>
  <script>
    var i = 0;

    function change() {
      var doc = document.getElementById("div");
      var color = ["red", "rgb(191, 0, 255)"];
      doc.style.backgroundColor = color[i];
      i = (i   1) % color.length;
    }
    setInterval(change, 1000);
  </script>
  <script>
    var i = 0;

    function change() {
      var doc = document.getElementById("div2");
      var color = ["rgb(0, 127, 255)", "rgb(255, 204, 51)"];
      doc.style.backgroundColor = color[i];
      i = (i   1) % color.length;
    }
    setInterval(change, 1000);
  </script>
  <script>
    var i = 0;

    function change() {
      var doc = document.getElementById("div3");
      var color = ["rgb(9, 255, 0)", "rgb(250, 214, 165)"];
      doc.style.backgroundColor = color[i];
      i = (i   1) % color.length;
    }
    setInterval(change, 1000);
  </script>
  <script>
    var i = 0;

    function change() {
      var doc = document.getElementById("div4");
      var color = ["gold", "rgb(141, 153, 163)"];
      doc.style.backgroundColor = color[i];
      i = (i   1) % color.length;
    }
    setInterval(change, 1000);
  </script>
</head>

<body>
  <div id="div" ></div>
  <div id="div2" ></div>
  <div id="div3" ></div>
  <div id="div4" ></div>

Thanks

CodePudding user response：

You're stomping all over your variable names. Without modifying your code much, this will work:

var i = 0;

 function change() {
   var doc = document.getElementById("div");
   var color = ["red", "rgb(191, 0, 255)"];
   doc.style.backgroundColor = color[i];
   i = (i   1) % color.length;
 }
 setInterval(change, 1000);

 var i2 = 0;

 function change2() {
   var doc = document.getElementById("div2");
   var color = ["rgb(0, 127, 255)", "rgb(255, 204, 51)"];
   doc.style.backgroundColor = color[i];
   i2 = (i2   1) % color.length;
 }
 setInterval(change2, 1000);

 var i3 = 0;

 function change3() {
   var doc = document.getElementById("div3");
   var color = ["rgb(9, 255, 0)", "rgb(250, 214, 165)"];
   doc.style.backgroundColor = color[i];
   i3 = (i3   1) % color.length;
 }
 setInterval(change3, 1000);

 var i4 = 0;

 function change4() {
   var doc = document.getElementById("div4");
   var color = ["gold", "rgb(141, 153, 163)"];
   doc.style.backgroundColor = color[i];
   i4 = (i4   1) % color.length;
 }
 setInterval(change4, 1000);

CodePudding user response：

 var i = 0;

    function change0() {
      var doc = document.getElementById("div1");
      var color = ["red", "rgb(191, 0, 255)"];
      doc.style.backgroundColor = color[i];
      i = (i   1) % color.length;
    }
    setInterval(change0, 100);
  
   

    function change1() {
      var doc = document.getElementById("div2");
      var color = ["rgb(0, 127, 255)", "rgb(255, 204, 51)"];
      doc.style.backgroundColor = color[i];
      i = (i   1) % color.length;
    }
    setInterval(change1, 200);
 
   

    function change2() {
      var doc = document.getElementById("div3");
      var color = ["rgb(9, 255, 0)", "rgb(250, 214, 165)"];
      doc.style.backgroundColor = color[i];
      i = (i   1) % color.length;
    }
    setInterval(change2, 300);
 
   

    function change3() {
      var doc = document.getElementById("div4");
      var color = ["gold", "rgb(141, 153, 163)"];
      doc.style.backgroundColor = color[i];
      i = (i   1) % color.length;
    }
    setInterval(change3, 400);

body {
      background-color: black;
    }
    
    .div {
      height: 200px;
      width: 200px;
      background-color: red;
      animation-name: spin;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    .div2 {
      height: 200px;
      width: 200px;
      background-color: rgb(0, 127, 255);
      animation-name: spin;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    .div3 {
      height: 200px;
      width: 200px;
      background-color: rgb(9, 255, 0);
      animation-name: spin2;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    .div4 {
      height: 200px;
      width: 200px;
      background-color: gold;
      animation-name: spin2;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    @keyframes spin2 {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(-360deg);
      }
    }
    
    .center {
      position: absolute;
      left: 10%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    .center2 {
      position: absolute;
      left: 30%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    .center3 {
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    .center4 {
      position: absolute;
      left: 70%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    #div {
      transition: 1s;
    }
    
    #div2 {
      transition: 1s;
    }
    
    #div3 {
      transition: 1s;
    }
    
    #div4 {
      transition: 1s;
    }

<body>
  <div id="div1" ></div>
  <div id="div2" ></div>
  <div id="div3" ></div>
  <div id="div4" ></div>
 </body>

CodePudding user response：

It is because all of these var variables are in the same scope. All of those <script> tags are run on the same execution stack.

You can simply change the variable name, i, in each <script> to see it yourself.

<head>
  <style>
    body {
      background-color: black;
    }
    
    .div {
      height: 200px;
      width: 200px;
      background-color: red;
      animation-name: spin;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    .div2 {
      height: 200px;
      width: 200px;
      background-color: rgb(0, 127, 255);
      animation-name: spin;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    .div3 {
      height: 200px;
      width: 200px;
      background-color: rgb(9, 255, 0);
      animation-name: spin2;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    .div4 {
      height: 200px;
      width: 200px;
      background-color: gold;
      animation-name: spin2;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    @keyframes spin2 {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(-360deg);
      }
    }
    
    .center {
      position: absolute;
      left: 10%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    .center2 {
      position: absolute;
      left: 30%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    .center3 {
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    .center4 {
      position: absolute;
      left: 70%;
      top: 30%;
      transform: translate(-50%, -50%);
    }
    
    #div {
      transition: 1s;
    }
    
    #div2 {
      transition: 1s;
    }
    
    #div3 {
      transition: 1s;
    }
    
    #div4 {
      transition: 1s;
    }
  </style>
  <script>
    var i = 0;

    function change() {
      var doc = document.getElementById("div");
      var color = ["red", "blue"];
      doc.style.backgroundColor = color[i];
      i = (i   1) % color.length;
    }
    setInterval(change, 1000);
  </script>
  <script>
    var j = 0;

    function change() {
      var doc = document.getElementById("div2");
      var color = ["rgb(0, 127, 255)", "rgb(255, 204, 51)"];
      doc.style.backgroundColor = color[j];
      j = (j   1) % color.length;
    }
    setInterval(change, 1000);
  </script>
  <script>
    var k = 0;

    function change() {
      var doc = document.getElementById("div3");
      var color = ["rgb(9, 255, 0)", "rgb(250, 214, 165)"];
      doc.style.backgroundColor = color[k];
      k = (k   1) % color.length;
    }
    setInterval(change, 1000);
  </script>
  <script>
    var l = 0;

    function change() {
      var doc = document.getElementById("div4");
      var color = ["gold", "rgb(141, 153, 163)"];
      doc.style.backgroundColor = color[l];
      l = (l   1) % color.length;
    }
    setInterval(change, 1000);
  </script>
</head>

<body>
  <div id="div" ></div>
  <div id="div2" ></div>
  <div id="div3" ></div>
  <div id="div4" ></div>
  </body>

PLUS: Try to use let instead of var. Because var variable in the top-most scope, will be a property of the global object (window in browsers). Read more about variable hoisting in JS.

CodePudding user response：

Here's a simple, reusable class. Just pass in the name of the div, a list of colors, and (optionally) a timeout for setInterval().

class Spinner {
  constructor(div, colors, speed = 1000) {
    this.index = 0;
    this.div = document.getElementById(div);
    this.colors = colors;
    setInterval((() => {
      this.div.style.backgroundColor = this.colors[this.index   % this.colors.length];
    }).bind(this), speed);
  }
}

new Spinner("div", ["red", "rgb(191, 0, 255)"]);
new Spinner("div2", ["rgb(0, 127, 255)", "rgb(255, 204, 51)"]);
new Spinner("div3", ["rgb(9, 255, 0)", "rgb(250, 214, 165)"]);
new Spinner("div4", ["gold", "rgb(141, 153, 163)"]);

body {
  background-color: black;
}

.div {
  height: 200px;
  width: 200px;
  background-color: red;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.div2 {
  height: 200px;
  width: 200px;
  background-color: rgb(0, 127, 255);
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.div3 {
  height: 200px;
  width: 200px;
  background-color: rgb(9, 255, 0);
  animation-name: spin2;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.div4 {
  height: 200px;
  width: 200px;
  background-color: gold;
  animation-name: spin2;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.center {
  position: absolute;
  left: 10%;
  top: 30%;
  transform: translate(-50%, -50%);
}

.center2 {
  position: absolute;
  left: 30%;
  top: 30%;
  transform: translate(-50%, -50%);
}

.center3 {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}

.center4 {
  position: absolute;
  left: 70%;
  top: 30%;
  transform: translate(-50%, -50%);
}

#div {
  transition: 1s;
}

#div2 {
  transition: 1s;
}

#div3 {
  transition: 1s;
}

#div4 {
  transition: 1s;
}

<div id="div" ></div>
<div id="div2" ></div>
<div id="div3" ></div>
<div id="div4" ></div>