Javascript 增加屏幕上显示的数值_Javascript_Html_Numbers_Increment

Javascript 增加屏幕上显示的数值

javascript html

Javascript 增加屏幕上显示的数值,javascript,html,numbers,increment,Javascript,Html,Numbers,Increment,我需要有一个数字，显示在网页上，将增加或减少时，向上或向下箭头键被按下。我找到/整理了javascript文件来实现这一点，但我似乎无法让它与我的HTML一起工作。我试图将它链接到一个html文本框，但它不起作用如果有人能帮助我的HTML，让这将是伟大的工作 var setTimeoutId; var keyIs = "up"; function myIncrementFunction() { var num = parseFloat(myText.value)+1;

我需要有一个数字，显示在网页上，将增加或减少时，向上或向下箭头键被按下。我找到/整理了javascript文件来实现这一点，但我似乎无法让它与我的HTML一起工作。我试图将它链接到一个html文本框，但它不起作用

如果有人能帮助我的HTML，让这将是伟大的工作

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"; 
}

我不明白为什么它会在发布的示例中起作用，当我保存文件并在浏览器中打开它时，它将不起作用

我在OSX Lion上使用Chrome/Safari

看起来有一些事情正在进行。首先，正如他在评论中指出的，您没有定义什么是

myText

其次，我认为你把事情复杂化了一点。试试这样的东西怎么样：

// 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--;
    }
}

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

为文本输入指定一个

ID

，类似于

然后使用类似的方法：

// 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--;
    }
}

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

这是一个非常简单的示例，但应该可以为您指明正确的方向。希望能有帮助

编辑：

在您的情况下，它不起作用，因为脚本试图在页面完全加载之前找到

输入

元素。您可以将脚本移动到页面底部，如下所示：

// 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--;
    }
}

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

在number.js中，您正在增加文本字段的值，但您最初没有设置值，因此没有增加的内容

尝试编辑您的HTML，以便：

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

有一个小的jQuery插件可以实现这一点：

用途：

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

在此处查看实时演示：

支持键盘和鼠标滚轮事件

您也可以发布HTML吗？而且，“我似乎无法让它与我的HTML一起工作”有点含糊不清。您是否收到任何错误消息？运行代码时会发生什么？您似乎没有定义Javascript中的“myText”实际上是什么。没有错误消息，它只是什么都不做。我有一个简单的文本字段名为“myText”，我知道它有点模糊，我根据一个论坛帖子把它放在一起，这个帖子也缺少HTML所有的海报都说他有一个文本字段，你可以用这个脚本增加它。我快疯了！！！在您发布的JSFIDLE示例中，它工作得非常好，但当我创建自己的文件时，它将无法工作！这很有效。谢谢现在我想去掉闪烁的插入符号。。除了一个输入字段之外，还可以使用其他内容吗？@KenrikMarch:如果你觉得我的答案很有用，你应该点击答案左边的向上箭头来投票。如果它解决了您的问题，您应该单击它左边的复选标记，将它标记为“已接受”。@KenrikMarch:要回答您的问题，是的，这当然是可能的。但是，您必须修改keydown事件的处理方式。下面是一个使用

div

的快速示例：确保单击“结果”框内的，然后使用向上和向下箭头