javascript - 根据产品数量计算总计

Question

我正在为一家餐厅建立一个网站，希望用户能够选择他们想要点多少食物。我对 JavaScript 很陌生，现在正在上学，但与此同时我需要一些帮助来解决这个问题。

到目前为止，它会根据数量和价格计算总计，我遇到的问题是客户可以更改价格!我怎样才能改变这个而不改变我的代码太多，因为我花了很长时间才让它工作。

这是我的 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>

还有我的简单脚本:

function multiply()
{
    a = Number(document.getElementById('QTY').value);
    b = Number(document.getElementById('PPRICE').value);
    c = a * b;

    document.getElementById('TOTAL').value = c;
}

Answer 1

“……我花了很长时间才让它工作”

一些提示:

大概控件位于表单中，因此您可以使用它来更轻松地引用元素。首先传递调用监听器的元素的引用:

<input name="QTY" onKeyUp="multiply(this)">

然后在您的函数中，您可以更轻松地引用其他控件。请记住使用 var 将变量保留为本地变量，并且乘法将值隐式转换为数字:

function multiply(element) {
    var form = element.form;
    form.TOTAL.value = element.value * form.PPRICE.value;
}

遵循其他人关于设置完全只读的建议，并在服务器上应用验证以确保您获得可接受的数据(客户端验证只是为了方便起见，它对于安全或数据清理没有任何值(value))。

对于发布，您的 HTML 可以如此简单:

<form>
  <input name="QTY" onKeyUp="multiply(this)"><br>
  <input name="PPRICE" value="8"><br>
  <input name="TOTAL" readonly>
</form>