{solved}Can someone plz help me with my code?

Question

I'm trying to use setInterval on clicking a button and then clear it and start another one on clicking another button and so on. I haven't been able to do that.
The problem with what I've done is that when I click the first button, the setInterval starts okay. But when I click another button to start another setInterval, I'm unable to clear the previous one b4 starting the new one, which is not what I want. Because the setIntervals are interfering with each other.
https://code.sololearn.com/W9Jlx9HJqYL5/?ref=app

Answer 1

Change the scope of the rotation variable, then prior to setting it check if it has been set, if so clear it.

let rotation;

function setRotationInterval (rotateAngle, sign){
let rotateDeg = 0
if (rotation) {
clearInterval(rotation);
}
rotation = setInterval(() => {
rotateDeg = rotateDeg + 1
mainBox.style.transform = `${rotateAngle}(${sign}${rotateDeg}deg)`
// console.log(mainBox.style.transform)
}, 8)

}

Answer 2

ChaoticDawg Thanks very much. It worked. I really appreciate your help

Answer 3

You should also add
if (rotation) {
clearInterval(rotation);
}
As the first statement for
userOptions[5].addEventListener("click", function ()
To get rid of a similar issue with the Automatic option.
Then, of course, set the setInterval() to the rotation variable as well.

Answer 4

ChaoticDawg Yes, thanks. I tried to adjust that also. But I'm unable to set the rotation in 3d.
What I want to achieve in userOptions[5] is:
box.style.transform = "rotateX(rotateDeg) rotateY(rotateDeg) rotateZ(rotateDeg)"

I'm trying to adjust what I set in setRotationInterval