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。