javascript 根据产品数量计算总计
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29689424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calculating a total from quantity of a product
提问by Jenn Oliver
I am building a website for a restaurant and want users to be able to choose how much food they would like to order. I am very new to JavaScript and am going to school for it right now but in the meantime I need some help with this question.
我正在为一家餐馆建立一个网站，并希望用户能够选择他们想要订购多少食物。我对 JavaScript 非常陌生，现在正在上学，但同时我需要一些帮助来解决这个问题。
I have it so far that it will calculate a total based on the quantity and the price, the problem that I am having is that the customer can change the price! How can I change this and not change my code too much since it has taken me forever to get it to work.
到目前为止，它会根据数量和价格计算总数，我遇到的问题是客户可以更改价格！我怎样才能改变这一点而不是改变我的代码太多，因为我花了很长时间才让它工作。
Here is my HTML:
这是我的 HTML：
<tr>
<td>Bruschetta con Crema di Agliotoa</td>
<td><input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()"/></td>
<td><input type="text" name="PPRICE" id="PPRICE" value="8" /></td>
<td><input type="text" name="TOTAL" id="TOTAL" /></td>
</tr>
And my simple script:
还有我的简单脚本：
function multiply()
{
a = Number(document.getElementById('QTY').value);
b = Number(document.getElementById('PPRICE').value);
c = a * b;
document.getElementById('TOTAL').value = c;
}
回答by RobG
"…it has taken me forever to get it to work"
“ ……我花了很长时间才让它发挥作用”
Some hints:
一些提示：
Presumably the controls are in a form, so you can use that to more easily reference elements. Start by passing a reference from the element calling the listener:
大概控件是在一个表单中，因此您可以使用它来更轻松地引用元素。首先传递来自调用侦听器的元素的引用：
<input name="QTY" onKeyUp="multiply(this)">
Then in your function, you can more easily reference other controls. Remember to keep variables local with var, and multiplication implicitly converts values to Number:
然后在您的函数中，您可以更轻松地引用其他控件。请记住使用var保持变量局部，乘法隐式地将值转换为数字：
function multiply(element) {
var form = element.form;
form.TOTAL.value = element.value * form.PPRICE.value;
}
Follow other's suggestions regarding making the total readonly, and apply validation at the server to ensure you get acceptable data (client side validation is for convenience only, it has no value for security or data cleansing).
遵循其他人关于使总只读的建议，并在服务器上应用验证以确保您获得可接受的数据（客户端验证只是为了方便，它对安全性或数据清理没有价值）。
For posting, your HTML can be as simple as:
对于发布，您的 HTML 可以像以下一样简单：
<form>
<input name="QTY" onKeyUp="multiply(this)"><br>
<input name="PPRICE" value="8"><br>
<input name="TOTAL" readonly>
</form>
回答by Eng Cy
You can set input type to hidden to hide the text box instead of setting readonly or disabled attribute, the value of PPRICE can be retrieve by JavaScript as well:
您可以将 input type 设置为 hidden 来隐藏文本框，而不是设置 readonly 或 disabled 属性，PPRICE 的值也可以通过 JavaScript 检索：
<tr>
<td>Bruschetta con Crema di Agliotoa</td>
<td>
<input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()" />
</td>
<td>
<input type="hidden" name="PPRICE" id="PPRICE" value="8"/>
8
</td>
<td>
<input type="text" name="TOTAL" id="TOTAL" />
</td>
</tr>
回答by meiamsome
Add the following attribute to the PPRICE input to prevent most users changing the price:
将以下属性添加到 PPRICE 输入以防止大多数用户更改价格：
disabled="disabled"
It is important to not trust this data if it is being sent to a server though, it is still editable, just not easily.
如果这些数据被发送到服务器，请不要相信它，这一点很重要，但它仍然是可编辑的，只是不容易。
回答by Jason Cust
You can add a readonlyor disabledattributeto the price field.
您可以向价格字段添加readonly或disabled属性。
function multiply() {
a = Number(document.getElementById('QTY').value);
b = Number(document.getElementById('PPRICE').value);
c = a * b;
document.getElementById('TOTAL').value = c;
}<tr>
<td>Bruschetta con Crema di Agliotoa</td>
<td>
<input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()" />
</td>
<td>
<input type="text" name="PPRICE" id="PPRICE" value="8" readonly/>
</td>
<td>
<input type="text" name="TOTAL" id="TOTAL" />
</td>
</tr>