Question

我一直在寻找一段时间，但无法想出如何编写以下示例：

输入Cans的重量：

(ADD BUTTON) - Purpose to add another input field to enter in additional weight field
Input Field = Weight 1 = 5
Input Field = Weight 2 = 5
Input Field = Weight 3 = 10  
Input Field = Weight i = ? (after clicking on ADD)

然后我想要实时计算总重量，所以在这种情况下它将是20并且最终估计具有该公式的总罐头（总重量* 150），因此在示例中总罐头将是3000。

我想使用HTML表单和Javascript，但我不知道如何处理添加按钮功能，因此可以实时计算总重量和总计。我正在考虑一个数组，但无法弄清楚语法。

任何建议或协助都会有很大的帮助。

Answer 1

我通常反对这一点，但似乎你真的需要帮助，所以现在就是这样。请记住，这是非常基本的，并且有更好的方法可以做到这一点，但我想保持它非常简单，因为你刚刚开始。首先 - 你真的不需要一个按钮。如果需要按钮，可以将该功能分配给按钮操作，但此代码会自动为您计算总数。此外，您还想添加一些验证，这个简单的示例假设每个人都只输入一个他们应该......从未发生过的数字，所以您要查看一些验证也是如此。

以下是一个工作示例：http://jsfiddle.net/813dL6d3/1/

代码：

HTML：

<input type="text" id="weight1" onblur="calculateForm();" /><br />
<input type="text" id="weight2" onblur="calculateForm();" /><br />
<input type="text" id="weight3" onblur="calculateForm();" /><br />
<input type="text" id="weightTotal" />

使用Javascript：

var calculateForm = function () {
    document.getElementById("weightTotal").value =
    (
        Number(document.getElementById("weight1").value) +
        Number(document.getElementById("weight2").value) +
        Number(document.getElementById("weight3").value)
    ) * 150;
};

使用Javascript实时计算的表单代码

1 个答案: