Home/ Questions/Q 6674053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T03:42:02+00:00

I need to have a number that’s displayed on a web page that will

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0