Increase Number Value Displayed on Screen

Question

I need to have a number that's displayed on a web page that will increase or decrease when the up or down arrow keys are pressed. I found/massaged together javascript file to do this but I can't seem to get it to work with my HTML. I was trying to link it to a html textbox but it would not work.

if someone could help me with the HTML to get this working that would be great.

var setTimeoutId; 
var keyIs = "up"; 

 function myIncrementFunction()
{
        var num = parseFloat(myText.value)+1;
        myText.value = num; 

}

myText.onkeydown = function(e)
{
keyIs = "down";

if(keyIs == "down")
    {
        var e = e || event ;
        if (e.keyCode == 38)
            {    
                for(var s=0; s<1; s++)
                    setTimeoutId = setTimeout('myIncrementFunction()',100); 
            }
    }
}

myText.onkeyup = function(e)
{ 
 keyIs = "up"; 
}

Tried this and it still is not working.. > ?

number.html

<html>
<head>
<script type="text/javascript" src="number.js"></script>
</head>

<body>

<input type="text" id="myText" />

</body>

</html>

number.js

var myText = document.getElementById("myText");

// Capture keyDown events
myText.onkeydown = function(e) {
// "38" is the up arrow key
if (e.keyCode == 38) {
    // increment the value in the text input
    myText.value++;
// "40" is the down arrow key
} else if (e.keyCode == 40) {
    // decrement the value in the text input
    myText.value--;
}
}

I don't understand why it works in the example posted and when I save my files and open it in the browser it will not work!

I'm on OSX Lion using Chrome/Safari

Can you post your HTML as well? Also, "I can't seem to get it to work with my HTML" is kind of vague. Are you receiving any error messages? What exactly happens when you run the code? — Colin Brock, Oct 13 '11 at 15:25
You don't seem to have defined what "myText" actually is in your Javascript. — James, Oct 13 '11 at 15:28
No error messages it just does nothing. I have a simple textfield named "myText" I know it's kind of vague I put this together based on a forum post that was also missing the HTML all the poster said what that he had a textfield and you could increment it using this script. — KDM, Oct 13 '11 at 15:34

score 1 · Accepted Answer · edited May 23 '17 at 09:59

1

It looks like there are a couple of things going on. First, as jayp points out in his comment, you aren't defining what myText is.

Secondly, I think you're over-complicating this a bit. How about trying something like this:

Give your text input an ID, something like <input type="text" id="myText" />

Then use something like this:

// Assign our text input to a variable
var myText = document.getElementById("myText");

// Capture keyDown events
myText.onkeydown = function(e) {
    // "38" is the up arrow key
    if (e.keyCode == 38) {
        // increment the value in the text input
        myText.value++;
    // "40" is the down arrow key
    } else if (e.keyCode == 40) {
        // decrement the value in the text input
        myText.value--;
    }
}

This is a pretty simplified example, but should get you pointed in the right direction. Hope it helps.

See a working example at JSFiddle

Edit:

It's not working in your case because the script is trying to find the input element before the page is fully loaded. You can move your script to the bottom of the page like this:

<html>
    <head></head>
    <body>
        <input type="text" id="myText" />
        <script type="text/javascript" src="number.js"></script>
    </body>
</html>

edited May 23 '17 at 09:59

Community

1
1

answered Oct 13 '11 at 16:25

Colin Brock

21,267
9
46
61

I'm about to go crazy!!! It works perfectly fine in the JSFiddle example you posted but when I make my own files it will not work! – KDM Oct 13 '11 at 16:38
That works. Thanks. Now I want to get rid of the blinking caret.. is it possible to make this work with something other then an input field? – KDM Oct 13 '11 at 19:17
@KenrikMarch: If you found the my answer helpful, you should vote it up by clicking the up arrow to the left of the answer. If it solved your problem, you should mark it as "accepted" by clicking the checkmark to the left of it. – Colin Brock Oct 13 '11 at 19:23
@KenrikMarch: To answer your question, yes it's certainly possible. You'll have to modify how the keydown events are handled though. – Colin Brock Oct 13 '11 at 19:24
Here's a quick example using a `div`:http://jsfiddle.net/RaVGB/ Be sure to click inside the "Result" box and then use the up and down arrows – Colin Brock Oct 13 '11 at 19:30

score 0 · Answer 2 · edited Oct 21 '12 at 09:50

0

In your number.js, you are increasing the value of the text field, but you have no value originally set, therefore there is nothing to increase.

Try editing your HTML so that you have:

<input type="text" id="myText" value="" />

edited Oct 21 '12 at 09:50

cspolton

4,495
4
26
34

answered May 16 '12 at 12:58

Adam

1

score 0 · Answer 3 · answered Apr 05 '13 at 02:38

0

There's a small jQuery plugin for doing this: https://github.com/nakupanda/number-updown

Usages:

$('#textInput').updown();

View live demo here: http://jsfiddle.net/XCtaH/embedded/result/

Keyboard and mousewheel events supported

answered Apr 05 '13 at 02:38

nakupanda

111
1
2

Increase Number Value Displayed on Screen

3 Answers3