Javascript表单更新Onclick

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>