Slow iterations?

Question

Is there a way to have it slowly change the color of the texts?
https://code.sololearn.com/WltGEPLlYF2I/?ref=app

Answer 1

https://stackoverflow.com/questions/1183872/put-a-delay-in-javascript

Answer 2

Use this...

for(var x = 0; x < testOne.length; x++){
setTimeout(function(){
testOne[x].style.color = "blue"
testOne[x].innerHTML = "Blue";
}, (x + 1) * 1000);
}

PS: I de-capitalised TestOne. You should not start variables with capitals, since older browsers may think they are a prototype like String or Array. Same with functions.

Answer 3

There's no possible way to slowly do so, because the JS code runs immediately you click the button, so the color changes immediately

Answer 4

Daniel Cooper You can do it in pure CSS with transition property. At example add

.Test{
transition: color 2s;
}

into CSS tab and you will see 😉

Answer 5

D'lite Well, you can re-write the code however you want, but luckily I found a way. Look at the updated code.
https://code.sololearn.com/WltGEPLlYF2I/?ref=app

Answer 6

Problem solved?

PS: You could shorten your code with a loop, instead of doing each of the three separately.

Answer 7

James Could you provide an example?

Answer 8

James I only do it on Sololearn because OCD xD