Javascript 表单更新 Onclick答案

【问题标题】：Javascript Form Update OnclickJavascript 表单更新 Onclick
【发布时间】：2011-10-08 03:07:24
【问题描述】：

我正在制作一个允许用户提交数字的 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="-">

【问题讨论】：

h2、h3 等不是其他文本框，所以我不完全确定您的意思。
您正在对string 变量进行递增和递减，这非常脆弱。无论如何，只需使用元素引用，您的代码中不需要表单引用。

标签： javascript html forms function onclick

【解决方案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。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：