从产品的数量计算总计答案

【问题标题】：Calculating a total from quantity of a product从产品的数量计算总计
【发布时间】：2015-06-23 17:27:50
【问题描述】：

我正在为一家餐厅建立一个网站，并希望用户能够选择他们想要订购多少食物。我对 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;
}

【问题讨论】：

我知道这只是一个练习，不是吗？您可以将输入的 PPRICE 替换为纯 html 文本中的价格；然后在 javascript 中硬编码价格值。
你到底想要什么？
如果它必须是输入，那么您可以根据您的需要将其禁用或只读。这是difference between them。
是的，这是一个练习/最后的作业。该课程是 HTML 简介，我们获得了 Javascript 的加分，所以我对 HTML 非常陌生，对 JS 几乎一无所知，只是摆弄着弄明白。
您可以使用disabled 或readonly html 属性并检查服务器中的数据，因为垃圾邮件机器人可以轻松更改它。

标签： javascript html cumulative-sum quantify

【解决方案1】：

您可以将输入类型设置为隐藏来隐藏文本框，而不是设置只读或禁用属性，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>

【讨论】：

【解决方案2】：

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

一些提示：

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

<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>

【讨论】：

所以我现在正在尝试这个，但它不起作用，是不是因为，虽然我有一个表格中的所有内容，但它是表格中的一个表格，它不会调用表格标签?
好吧，我想通了！我将每个菜单项放入一个表单标签中，然后将其完美地相乘！非常感谢你给我看这个，我真的很感激！
好的，所以我不得不更改我的代码，所以这不再是一个表格了......有人告诉我将每个项目放入表单标签是不合适的，有没有办法让它工作所有菜单项？？
您可以在表格中构建菜单，然后将其放入表单中。使用表单进行用户输入绝对是“正确的”，尽管您可能希望使用 span 或 div 元素来显示计算值。如果您需要这方面的帮助，请提出另一个问题。不过，应该有很多资源可以帮助您。

【解决方案3】：

您可以在价格字段中添加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>

【讨论】：

嘿，我一直在尝试这段代码，它适用于 1 个菜单项，但是当我将它添加到我的所有菜单项时，没有任何效果。你有什么建议让它适用于所有人吗？？？谢谢你的帮助！

【解决方案4】：

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

disabled="disabled"

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

【讨论】：