0

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

4 回答 4

1

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

一些提示：

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

<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>
于 2015-04-17T03:14:59.360 回答
0

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

disabled="disabled"

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

于 2015-04-17T03:03:41.380 回答
0

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

于 2015-04-17T03:08:01.033 回答
0

您可以将输入类型设置为隐藏以隐藏文本框，而不是设置只读或禁用属性，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>
于 2015-04-17T03:24:39.417 回答