JavaScript running light doesnt get the last element-CodePudding

Im trying to have a running progress bar .My html looks like this

var timer;
var index = 0;

window.onload = () => {
  var parent = document.querySelector("div");

  timer = window.setInterval(() => {

    var child = parent.children[index];
    child.className = "on";
    index  ;
    if (index >= 4) {

      turnOff(0, parent);
      index = 0
    }
  }, 1000);
}

var turnOff = (i, parent) => {
  for (var i = 0; i < 4; i  ) {
    var e = parent.children[i];
    e.className = "off";
  }
};

function disbaleme() {
  window.clearInterval(timer)
}

.on {
  background-color: blue;
  width: 20px;
  height: 20px;
  border: 2px;
  display: inline-block;
  margin: 2px;
}

.off {
  background-color: white;
  width: 20px;
  height: 20px;
  border: 2px;
  display: inline-block;
  margin: 2px;
}

<!DOCTYPE html>
<html lang="en">

<body>
  <div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div id="main">
    <button onclick="disbaleme()">click</button>
  </div>
</body>

</html>

the issue is i can never get the last div element and set the className of it to on. Does anyone know what is going wrong here? if i remove the turnOff method however it works just fine. im really confused

CodePudding user response：

You remove the class as soon as you add it. You need to remove it on the next iteration. So move the check to the start of your function and reset the index there.

I added a return so it says empty for one second. If you do not want it to be empty, remove the return.

var timer;
var index = 0;

window.onload = () => {
  var parent = document.querySelector("div");

  timer = window.setInterval(() => {
    if (index >= 4) {
      turnOff(0, parent);
      index = 0
      return; // remove the reuturn if you do not want it to be empty
    }
    var child = parent.children[index];
    child.className = "on";
    index  ;
  }, 1000);

}
var turnOff = (i, parent) => {
  for (var i = 0; i < 4; i  ) {
    var e = parent.children[i];
    e.className = "off";
  }
};

function disbaleme() {
  window.clearInterval(timer)
}

.on {
  background-color: blue;
  width: 20px;
  height: 20px;
  border: 2px;
  display: inline-block;
  margin: 2px;
}

.off {
  background-color: white;
  width: 20px;
  height: 20px;
  border: 2px;
  display: inline-block;
  margin: 2px;
}

<div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

On the last tick, your function in setInterval is setting the className to on and then immediately setting everything to off again (with turnOff). Here is a version of your code that will only do one (turn last element on) or the other (turn all elements off), but not both. This I think brings you one step closer to what you're trying to do.

var timer;
var index=0;

window.onload=()=>{
    var parent = document.querySelector("div");

    timer=window.setInterval(()=>{
        if(index>=4)
        {   
            turnOff(0,parent);
            index=0
        } else {
          var child=parent.children[index];
          child.className="on";
          index  ;
        }
    },1000);

}
var turnOff=(i,parent)=>{
    for(var i=0;i<4;i  )
    {
        var e = parent.children[i];
        e.className="off";
    }};
function disbaleme(){
    window.clearInterval(timer)
}

<html lang="en">
<style>
    .on{
        background-color: blue;
        width: 20px;
        height: 20px;
        border: 2px;
        display: inline-block;
        margin: 2px;

    }
    .off{
        background-color: white;
        width: 20px;
        height: 20px;
        border: 2px;
        display: inline-block;
        margin: 2px;

    }
</style>
<body>
    <div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
    </div>
    <div id="main">
<button onclick="disbaleme()">click</button>
    </div>
</body>
</html>

I also want to bring to your attention that the first parameter to your turnOff function is not being used. In this second snippet, I remove that parameter completely and the code works just the same.

var timer;
var index = 0;

window.onload = () => {
  var parent = document.querySelector("div");

  timer = window.setInterval(() => {
    if(index >= 4) {   
      turnOff(parent);
      index = 0;
    } else {
      var child=parent.children[index];
      child.className="on";
      index  ;
    }
  }, 1000);
};

var turnOff = (parent) => {
  for(var i = 0; i < 4; i  ) {
    var e = parent.children[i];
    e.className="off";
  }
};

function disbaleme () {
  window.clearInterval(timer);
}

<html lang="en">
<style>
  .on{
    background-color: blue;
    width: 20px;
    height: 20px;
    border: 2px;
    display: inline-block;
    margin: 2px;
  }
  .off{
    background-color: white;
    width: 20px;
    height: 20px;
    border: 2px;
    display: inline-block;
    margin: 2px;
  }
</style>
<body>
  <div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div id="main">
    <button onclick="disbaleme()">click</button>
  </div>
</body>
</html>