title: Increase Number Value Displayed on Screen
body: <p>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. </p>
  
  <p>if someone could help me with the HTML to get this working that would be great.</p>
  
  <pre><code>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&lt;1; s++)
                      setTimeoutId = setTimeout('myIncrementFunction()',100); 
              }
      }
  }
  
  myText.onkeyup = function(e)
  { 
   keyIs = "up"; 
  }
  </code></pre>
  
  <p>Tried this and it still is not working.. > ? </p>
  
  <p>number.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="number.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;input type="text" id="myText" /&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>number.js</p>
  
  <pre><code>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--;
  }
  }
  </code></pre>
  
  <p>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!</p>
  
  <p>I'm on OSX Lion using Chrome/Safari</p>