Javascript表单更新Onclick

我正在制作一个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>

功能增加（表格）{
var val=form.h1.value；
val++；
form.h1.value=val；
}
功能减少（表格）{
var val=form.h1.value；
瓦尔--；
form.h1.value=val；
}

HTML

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

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

我的问题是，我希望能够对任何其他文本框（如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>

功能增加（表格、id）{
var val=form.id.value；
val++；
form.id.value=val；
}
功能减少（表格，id）{
var val=form.id.value；
瓦尔--；
form.id.value=val；
}

HTML

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

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

试试看

及

---

表单就像一个字典，您可以在其中按名称对其字段进行寻址。您可以使用方括号来完成此操作。字段的名称是字符串，因此您必须传递

'h1'

，而不仅仅是

h1

，请尝试进行以下更改：

在表单中，传递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>

功能增加（表格、id）{
var val=形式[id]。值；
val++；
form.id.value=val；
}
功能减少（表格，id）{
var val=形式[id]。值；
瓦尔--；
form.id.value=val；
}

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

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

功能增加（要素）{
element.value=element.value++；
}
功能减少（元素）{
element.value=element.value--；
}

h2、h3等不是其他文本框，所以我不完全确定您的意思。您正在对

string

变量执行递增和递减操作，这非常脆弱。无论如何，只需使用元素引用即可，代码中不需要表单引用。