Question

我正在制作一个允许用户提交数字的html表单。我只是希望他们能够单击按钮来增加或减少文本输入中的数字，而不是让用户输入数字。以下重要代码完全符合我的要求：

使用Javascript：

<script type="text/javascript">
    function increase (form) {
        var val = form.h1.value;
        val++;
        form.h1.value = val;
        }

    function decrease (form) {
        var val = form.h1.value;
        val--;
        form.h1.value = val;
        }
</script>

HTML

<input type="textbox" name="h1" size="3">
<input type="button" onclick="increase(this.form)" value="+">
<input type="button" onclick="decrease(this.form)" value="-">

我的问题是我希望能够为任何其他文本框（例如h2，h3等）使用'增加'和'减少'功能。我尝试通过添加第二个参数id来更改代码，并使用它来确定要更新的表单元素。它不会起作用。任何帮助搞清楚我出错的地方都将不胜感激！

的Javascript

<script type="text/javascript">
    function increase (form, id) {
        var val = form.id.value;
        val++;
        form.id.value = val;
        }

    function decrease (form, id) {
        var val = form.id.value;
        val--;
        form.id.value = val;
        }
</script>

HTML

<input type="textbox" name="h1" size="3">
<input type="button" onclick="increase(this.form, h1)" value="+">
<input type="button" onclick="decrease(this.form, h1)" value="-">

Answer 1

尝试

function increase (form, id) {
    var val = form[id].value;
    val++;
    form[id].value = val;
}

和

<input type="button" onclick="increase(this.form, 'h1')" value="+">
<input type="button" onclick="decrease(this.form, 'h1')" value="-">

表单用作字典，您可以按名称查询其字段。您可以使用方括号来完成此操作。该字段的名称是一个字符串，因此您必须传递'h1'而不是h1。

Answer 2

尝试进行这些更改：

在表单中传递ID而不是变量的字符串。

<input type="textbox" name="h1" size="3">
<input type="button" onclick="increase(this.form, 'h1')" value="+">
<input type="button" onclick="decrease(this.form, 'h1')" value="-">

在JavaScript中，更改引用表单中字段的方式。

<script type="text/javascript">
    function increase (form, id) {
        var val = form[id].value;
        val++;
        form.id.value = val;
     }

    function decrease (form, id) {
        var val = form[id].value;
        val--;
        form.id.value = val;
    }
 </script>

Answer 3

您可以直接传递需要更改其值的文本框元素，而不是传递两个参数。请尝试以下更改。

<input type="textbox" name="h1" size="3">
<input type="button" onclick="increase(document.h1)" value="+">
<input type="button" onclick="decrease(document.h1)" value="-">

你的javascript函数如下所示。

<script type="text/javascript">
function increase (element) {
    element.value = element.value++;
 }

function decrease (element) {
    element.value = element.value--;
}
</script>

Javascript表单更新Onclick

3 个答案: