apply color to every element each time using for loop

Question

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>

Does this answer your question? [How do I add a delay in a JavaScript loop?](https://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop) — DBS, Nov 04 '22 at 16:52
Your code seems to work as it is. Please define "_nothing work_". — Teemu, Nov 04 '22 at 16:52
Not clear on the ask here. From the code above, it looks like it is applying your color every 500ms. If you want to do it only once, you can change the `toggle` to `add` and `setInterval` to `setTimeout`. — vighnesh153, Nov 04 '22 at 16:52

Dr. Vortex · Accepted Answer · 2022-11-04T18:57:01.573

1

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);

edited Nov 04 '22 at 18:57

answered Nov 04 '22 at 16:51

Dr. Vortex

505
1
3
16

yes but it stop after first loop i want infinite loop – IMRAN H Nov 04 '22 at 18:31
@IMRANH I've updated it to use `i++ % els.length` which should be infinite – Dr. Vortex Nov 04 '22 at 18:57

score -2 · Answer 2 · answered Nov 04 '22 at 16:51

-2

Try this:

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

answered Nov 04 '22 at 16:51

milner236

37
9

2

This does not do what the OP wants. – Dr. Vortex Nov 04 '22 at 16:52
The difference is that Milner's answer will toggle the class on all the elements every 500 ms while mine will progressively add the class every 500ms, line-by-line. – Dr. Vortex Nov 04 '22 at 16:58
@Dr-Vortex i want the loop to continue but your code stop after one loop on all – IMRAN H Nov 04 '22 at 18:25

apply color to every element each time using for loop

2 Answers2