My goal is to initiate animations when the mouse is pressed down and then immediately halt them once the mouse is released.
Upon pressing the mouse, I set a flag to true which triggers the animation of the corresponding button that was clicked. However, the issue arises when releasing the mouse, as setting the flag to false does not stop the animation. Despite not receiving any errors in my console, there seems to be a logical error causing this problem.
What mistake have I made here, and what steps can I take to rectify it?
https://jsfiddle.net/b4kn4w3g/2/
The critical code snippet:
function eventBundle(e) {
if (e.target !== e.currentTarget) {
if (e.target == parent.children[0]) {
isDown = true;
amount = "reduce";
} else if (e.target == parent.children[1]) {
isDown = true;
amount = "increase";
}
}
e.stopPropagation();
}
window.addEventListener("mouseup", function(){
isDown = false;
amount = "neutral";
});
function holdStuff() {
if (isDown === true && amount === "increase") {
maxValue += 100;
} else if (isDown === true && amount === "reduce") {
maxValue -= 100;
}
requestAnimationFrame(holdStuff)
}