根据产品数量计算总数

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

将以下属性添加到 PPRICE 输入以防止大多数用户更改价格：

disabled="disabled"

重要的是不要相信这个数据，如果它被发送到服务器，它仍然是可编辑的，只是不容易。

Answer 2

您可以在价格字段中添加 readonly or disabled attribute。

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>

Answer 3

"...我花了很长时间才开始工作"

一些提示：

大概控件在一个表单中，因此您可以使用它来更轻松地引用元素。首先传递来自调用侦听器的元素的引用：

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

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

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

按照其他人关于将总计设置为只读的建议，并在服务器上应用验证以确保您获得可接受的数据（客户端验证只是为了方便，对安全或数据清理没有价值）。

对于发帖，您的 HTML 可以很简单：

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

Answer 4

您可以将输入类型设置为 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>

根据产品数量计算总数

Calculating a total from quantity of a product

html

javascript

quantify

cumulative-sum