Changing Setinterval at onclick

Question

Im trying to change the speed (setinterval) on this two boxes with onclick function. So far i get the two boxes changing color and i setInterval by 1000(ms) , and now i want to click either one of the boxes and i want them to change the speed of color.

 setInterval(
    function(){
        if (quadraDo == true) {
            document.getElementById("demo0").style.background = "red"
            document.getElementById("demo1").style.background = "blue";
            
            quadraDo = false;
        }
        else if (quadraDo == false) {
            document.getElementById("demo0").style.background = "blue";
            document.getElementById("demo1").style.background = "red";
            quadraDo = true;
        }
    
    
    }, 1000);

    <div id="demo0" style="position: absolute;background-color: chartreuse ; width: 100px;height: 100px;left: 100px;top: 100px;"  onclick="myFunction(this)"></div>
    <div id="demo1" style="position: absolute;background-color: chartreuse ; width: 100px;height: 100px;left: 300px;top: 100px;"  onclick="myFunction(this)"></div>

You'd have to cancel the timer and start a new one. You can't change an already-started interval timer. — Pointy, Nov 22 '19 at 14:54
Does this answer your question? [Changing the interval of SetInterval while it's running](https://stackoverflow.com/questions/1280263/changing-the-interval-of-setinterval-while-its-running) — Liam, Nov 22 '19 at 14:56
Does this answer your question? [How to change the interval dynamically when using setInterval](https://stackoverflow.com/questions/35442258/how-to-change-the-interval-dynamically-when-using-setinterval) — Mosè Raguzzini, Nov 22 '19 at 15:46

score 1 · Answer 1 · edited Nov 22 '19 at 15:55

A bit of explanation. I've used your code to create a function changeColor which works with the initial interval speed of 1000ms

Then upon clicking any of the squares, the initial timer is cleared and a new one is started with a different interval speed. In this case:

clicking on the first square slows down the initial tempo (x0.5) or 500ms
clicking on the second one speeds up the initial tempo (x2) or 2000ms

That way myFunction is reused for setting the initial tempo and changing the tempo upon clicking. The essential part is to clear the current interval before starting a new one.

let quadraDo = false;
function changeColor() {
  if (quadraDo == true) {
    document.getElementById("demo0").style.background = "red";
    document.getElementById("demo1").style.background = "blue";
    quadraDo = false;
  } else if (quadraDo == false) {
    document.getElementById("demo0").style.background = "blue";
    document.getElementById("demo1").style.background = "red";
    quadraDo = true;
  }
}

function myFunction(speed) {
  clearInterval(timer);
  timer = setInterval(changeColor, speed);
}

let timer = setInterval(changeColor, 1000);

<div id="demo0" style="position: absolute;background-color: chartreuse ; width: 100px;height: 100px;left: 100px;top: 100px;"  onclick="myFunction(500)"></div>
<div id="demo1" style="position: absolute;background-color: chartreuse ; width: 100px;height: 100px;left: 300px;top: 100px;"  onclick="myFunction(2000)"></div>

By the way you have a typo while copy-pasting in your code:

document.getElementById.setInterval("demo0",100).style.background = "red"

should be:

document.getElementById("demo0").style.background = "red"

Changing Setinterval at onclick

1 Answers1