Looping Javascript while mouse is held down

I’m new to Hype, so please forgive me if I’m asking a basic question. I’m working on an interactive graphic with a list of prices that can be raised or lowered using an accompanying pair of arrow buttons. Right now, each increase or decrease requires an individual click/tap, which isn’t a great experience if you want to change the prices significantly. I’d like to keep that increase/decrease happening in a loop for as long as the button stays down, like holding down a key on a computer keyboard.

Is there a reliable method for handling this in Hype? Any help greatly appreciated!


If you share your doc @jeffpatt then we can give you a more specific solution.

There are many approaches to doing what you are asking but need to know more on how you are increasing your “list of prices”

Sure thing. Document attached here!

minwage.zip (118.1 KB)

ok. just change your priceUp() function to this:

var lineItem = element.id.replace("Up", "");
eval( "var num = " + lineItem + "Num;" );
eval( "var txt = " + lineItem + "Txt;" );
timer = setInterval( function () {
	eval( lineItem + "Num = num");
	}, 100)

and then run it “on mouse down” instead of “on mouse click” and then important run another function “On Mouse Up” and put this in it:


This will cancel the interval so it doesn’t keep going up. :wink:

You can then repeat the same for your priceDown() function. Of course placing the similar code inside the interval (timer)

from num-- down.


This worked perfectly, thank you.

One addition: I also needed add clearInterval to the “On Mouse Out” event, to keep a click-and-drag motion from creating an infinite loop.

Thanks again for your help!