Geek Answers Handbook

How to implement javascript function?

I am a complete newbie looking for instructions on implementing javascript. I am trying to replace the YUI slider with buttons and a text box. I am trying to create buttons that, when held, will continue to increase the text box, preferably faster and faster. ( http://www.blackbird502.com/white.htm)I have this in the java tag in my 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 do not know how to realize the press and keep the following in my 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.

+6
javascript button forms
source share
4 answers

This code should do whatever you are looking for; it was very weakly based on the example of tj111. I tried to make it as reusable as possible, and it doesn't need JavaScript mixed with HTML.

You need to add identifiers to the buttons ( btnUP and btnDOWN ) and the text field ( amount ). You can change these identifiers 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); }
+5
source share

It's pretty quick and dirty, but it should give you a start. Basically, you want to create some initial "constants" that you can play with to get your desired behavior. The initial time between increments is 1000 ms, and at each iteration - 90% (1000, 990, 891, ... 100) and ceases to become less by 100 ms. You can adjust this coefficient to accelerate or accelerate acceleration. The rest, in my opinion, is pretty close to what I think you need. It seems like you just lacked event assignments. In window.onload you'll see that I assign onmouseup and onmousedown to functions that simply call the increment() or decrement() functions with your original timeout, or the ClearTimeout() function to stop the counter.

EDIT: I changed this a bit to fix the error. Now, if you move the mouse over the button and release it, it will stop the counter.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <title><!-- Insert your title here --></title> <script> // Fake Constants var INITIAL_TIME = 1000; var ACCELERATION = .9; var MIN_TIME = 100; // create global variables to hold DOM objects, and timer var up = null, down = null, count = null, timer = null; // Increment the counter function increment (time) { // decrease timeout by our acceleration factor, unless it at the minimum time = (time * ACCELERATION > MIN_TIME) ? (time * ACCELERATION) : MIN_TIME; count.value ++ ; // set the timeout for the next round, and pass in the new smaller timeout timer = setTimeout( function () { increment(time); }, time); } // Same as increment only subtracts one instead of adding. // -- could easily make one function and pass an pos/neg factor instead function decrement (time) { time = time * ACCELERATION > MIN_TIME ? (time * ACCELERATION) : MIN_TIME; count.value --; timer = setTimeout( function () { decrement(time); }, time); } // Initialize the page after all the forms load window.onload = function () { // initialization function // assign DOM objects to our vars for ease of use. up = document.getElementById('up_btn'); down = document.getElementById('dwn_btn'); count = document.getElementById('count'); // create event handlers for mouse up and down up.onmousedown = function () { increment(INITIAL_TIME); } down.onmousedown = function () { decrement(INITIAL_TIME); } document.onmouseup = function () { clearTimeout(timer); } } </script> </head> <body> <!-- Insert your content here --> <form name="the_form"> <input type="button" value="Up" id="up_btn" /><br /> <input type="button" value="Down" id="dwn_btn" /></br> <br /> Count: <input type="text" value="0" id="count" /> </form> </body> </html>
+2
source share

The easiest way is to simply add an identifier to each of the buttons, and then use them to retrieve elements and add events.

 //should only be called after the window/DOM has been loaded window.onload = function() { //the buttons var btnUP = document.getElementById('btnUP'); var btnDOWN = document.getElementById('btnDOWN'); //the amount var amount = document.getElementById('amount'); //actions to occur onclick var upClick = function() { amount.value++; } var downClick = function() { amount.value--; } //assign the actions here holdit(btnUP, upClick, 1000, 2); holdit(btnDOWN, downClick, 1000, 2); } <form> <input type=button value="UP" class="btn" id='btnUP'> <br /> <input type=text name=amount value=5 class="text" id='amount'> <br /> <input type=button value="DOWN" class="btn" id='btnDOWN'> </form>
0
source share

One aspect that should not be overlooked is that you are connected to the onclick event, which occurs when fully pressed (mouse button and pressing the up key). It sounds like you would like to listen to another event, http://www.w3schools.com/jsref/jsref_onmousedown.asp '> onMouseDown. I think that if you then implemented some other timer-based solutions, you would already be able to get the functionality that you are asking for.

Good luck

0
source share

More articles:


All Articles