apply color to every element each time using for loop-CodePudding

I want that blue color apply to each line after 500ms. I am new to JavaScript I tried everything but nothing work..

here is the code:

let para = document.getElementsByTagName("p");
for (let index = 0; index < para.length; index  ) {
  function timer() {
    para[index].classList.toggle("blue");
  }
  setInterval(timer, 500);
}

.blue {
  color: blueviolet;
}

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, ratione.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, ratione.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, ratione.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, ratione.
</p>

CodePudding user response：

This will toggle the blue on every element every 500ms...

You want something like this:

let i = 0, els = document.querySelectorAll('p');
//the selector is the same but looks better and is more readable.

setInterval(() => {
    els[i   % els.length].classList.toggle('blue');
}, 500);

CodePudding user response：

Try this:

para[index].classList.add("blue");