Question

I’m a complete novice, looking for instructions on implementing javascript. I am attempting to replace a YUI slider with buttons and a text field. I am trying to achieve buttons that, when held down, will continue to make the text field increase, preferably at a faster and faster rate. (http://www.blackbird502.com/white.htm)I have this in the java tag in the head:

function holdit(btn, action, start, speedup) {
var t;

var repeat = function () {
    action();
    t = setTimeout(repeat, start);
    start = start / speedup;
}

btn.mousedown = function() {
    repeat();
}

btn.mouseup = function () {
    clearTimeout(t);
}

/* to use */
holdit(btn, function () { }, 1000, 2); 
/* x..1000ms..x..500ms..x..250ms..x */

I have no clue how to implement the press and hold into the following in the body:

<form><input type=button value="UP"  class="btn" onClick="javascript:this.form.amount.value++;"><br /><input type=text name=amount value=5 class="text"><br /> <input type=button value="DOWN"  class="btn" onClick="javascript:this.form.amount.value--;" ></form>

Is it possible? Thanks.

Answer 1

This code should do everything you’re looking for; it’s based very loosely on tj111’s example. I tried to make it as reusable as possible, and it doesn’t need JavaScript mixed in with the HTML.

You do need to add IDs to the buttons (btnUP and btnDOWN) and text field (amount). You can change these IDs in the window.onload statement.

// This function creates a closure and puts a mousedown handler on the element specified in the "button" parameter.
function makeButtonIncrement(button, action, target, initialDelay, multiplier){
    var holdTimer, changeValue, timerIsRunning = false, delay = initialDelay;
    changeValue = function(){
        if(action == "add" && target.value < 1000)
            target.value++;
        else if(action == "subtract" && target.value > 0)
            target.value--;
        holdTimer = setTimeout(changeValue, delay);
        if(delay > 20) delay = delay * multiplier;
        if(!timerIsRunning){
            // When the function is first called, it puts an onmouseup handler on the whole document 
            // that stops the process when the mouse is released. This is important if the user moves
            // the cursor off of the button.
            document.onmouseup = function(){
                clearTimeout(holdTimer);
                document.onmouseup = null;
                timerIsRunning = false;
                delay = initialDelay;
            }
            timerIsRunning = true;
        }
    }
    button.onmousedown = changeValue;
}

//should only be called after the window/DOM has been loaded
window.onload = function() {
    makeButtonIncrement(document.getElementById('btnUP'), "add", document.getElementById('amount'), 500, 0.7);
    makeButtonIncrement(document.getElementById('btnDOWN'), "subtract", document.getElementById('amount'), 500, 0.7);
}