0

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

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

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

4

3 回答 3

2

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

  • 按下按钮时调用的 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

于 2013-03-22T15:41:19.473 回答
1

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

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

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

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

这意味着每当按下 id 为“button”的元素时，都会调用 addOne 函数。因此，从这里开始编写 addOne 函数，该函数获取数字文本框的值，将其加一，然后将文本框的值设置为新数字。

var addOneToEach = function() {
    $(":text").each(function(){
        var num = $(this).val();
        $(this).val(num + 1);
    });
}
于 2013-03-22T15:38:16.007 回答
1

试试这个。

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

希望能帮到你

于 2013-03-22T15:44:59.710 回答