Question

我是HTML和JavaScript的新手，但我想知道是否有任何方法可以在每次按下按钮时使文本框中的数值增加1。这需要对多个文本框进行，所以我认为这可以通过一个函数来完成。

<html>
<head>
function (add) {
function goes here
}
</head>
<input type="text">
<input type="button" value="Add One" onclick="add()">
</body>
</html>

如果我的代码毫无意义，我很抱歉，因为我不知道如何实现这一目标。非常感谢任何帮助！

Answer 1

这很简单，真的。您的代码需要以下元素：

按下按钮时调用的Javascript函数
检索文本框当前值的方法
将新值重新放回文本框的方法

要引用页面中的特定元素，您需要为其指定ID。不要忘记在代码或HTML中给它一个默认值，这样就不会以空文本框开头。例如：

<input type="text" value="0" id="textField"/>

然后，您可以使用以下内容在Javascript中获取该文本字段的值：

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

Javascript变量textField现在包含对文本字段的引用，我们可以使用textField.value获取其内容。您也可以使用相同的value变量回写内容。您还需要使用parseInt函数将字段中的文本转换为数字，以便Javascript不会尝试将字符“1”粘贴在其末尾。

在页面的<HEAD>部分，您可以添加以下内容：

<script language="Javascript>
function handleButtonClick() {
    var textField = document.getElementById( "textField" );
    var currentValue = parseInt(textField.value);

    // Add one
    currentValue = currentValue + 1;

    // Put it back with the new +1'd value
    textField.value = currentValue;
}
</script>

要在按下按钮时在Javascript中调用函数，您将使用事件处理程序，该事件处理程序会在浏览器中发生操作时发出Javascript信号以运行特定的代码片段。在这种情况下，由于您希望在用户单击按钮时运行代码，因此您将使用onClick处理程序。您可以将其设置为脚本的一部分或HTML代码中。在Javascript中完成它最终会更加健壮，但为了简单起见，我将在HTML代码中执行此操作。

<input type="button" onClick="handleButtonClick()"/>

就是这样。当您单击该按钮时，假设您已正确连接它。

有关getElementById和this page的一些基本信息，请参阅this page，了解有关其他可用事件处理程序的基本信息。

Answer 2

我会使用jquery，所以你的html应该是这样的：

<input type="number" id="numbox">
<button type="button" id="button">

在您的javascript文件中添加一个事件处理程序：

$("#button").click(addOne);

这意味着只要按下具有id“按钮”的元素，就会调用addOne函数。所以从这里开始编写addOne函数，它接受数字文本框的值，向其中添加一个，然后将文本框的值设置为新数字。

var addOneToEach = function() {
    $(":text").each(function(){
        var num = $(this).val();
        $(this).val(num + 1);
    });
}

Answer 3

试试这个。

<script type="text/javascript">
function add() {
    var num = document.getElementById("mynum").value;
    if(num == '') num = 0;
    document.getElementById("mynum").value = parseInt(num ,10) + 1;
    }
</script>
<html>
<head>
function (add) {
function goes here
}
</head>
<div id='txt'></div>
<form action="" method="post">
<input type="text" id='mynum'>
<input type="button" onclick="add()">
</form>
</body>
</html>

希望能帮到你

每次单击按钮时，使表单中的数字上升

3 个答案: