购物车，功能显示总。 [JS]

Question

我对这段代码感到非常沮丧，希望你能帮助我一点。

正如您所看到的，我正在尝试将此代码设置为电子商务项目，有一台售价600美元的计算机，然后有一些额外的额外费用。在＆＃39;功能计算机（）＆＃39;我验证了支票，但我想创建一个功能，显示购买的总和，主要产品是计算机和附加组件。

如何使用JS为每个附加组件设置值？

如果你看到一些奇怪的代码是因为我正在使用bootstrap。我只是个初学者。

我有这个HTML代码

<form>
  <input type="checkbox" name="iMac" value="iMacPC">
  <h3>Add ons</h3>
  <p><input type="checkbox" name="iMac" id="ram" value="Ram"> 16 GB RAM (+$175)
    <input type="checkbox" name="iMac" id="harddrive" value="Harddrive"> 1 TB HD (+200)</p>
  <p><input type="checkbox" name="iMac" id="guaranteed" value="Guaranteed"> Extended Guarantee (+$150)</p>
  <p><input type="checkbox" name="iMac" id="processor" value="Processor"> Core i7-4700HQ 2.4 GHz (+$125)</p>
  <br>
  <p><input type="button" id="buttonMac" onclick="computer();" class="btn btn-default btn-sm" value='Order Now &raquo;'></p>
  <p><input class="alert alert-info" type="text" id="order1" size="50" style="display: none;"></p>
</form>

这是根据这个JS函数来确定检查。

function computer(){
  var iMac = document.forms[1].iMac,
      txt = "",
      i;

  if (iMac.checked === null) {
    return false;
  }

  document.getElementById("order1").value = "Please select at least one Item";
  document.getElementById("order1").style.color = "#E34234";

  for (i=0; i<iMac.length; i++){
    if (iMac[i].checked){
      txt = txt + iMac[i].value + " ";
      document.getElementById("order1").value = "Order: " + txt;
      document.getElementById("order1").style.color = "#2980b9";
    }
  }
}

Answer 1

方法1 - 使用value属性来保存费用

通过将价格存储在value属性中，您可以轻松将其转换为整数并将其添加到总数中：

<强> HTML

<input type="checkbox" name="iMac" id="iMacPC" value="600"> iMacPC </input>
<h3>Add ons</h3>
<input type="checkbox" name="iMac" id="Ram" value="175"> 16 GB RAM (+$175) </input>
<input type="checkbox" name="iMac" id="Harddrive" value="200"> 1 TB HD (+200) </input>
<input type="checkbox" name="iMac" id="Guaranteed" value="150"> Extended Guarantee (+$150) </input>
<input type="checkbox" name="iMac" id="Processor" value="125"> Core i7-4700HQ 2.4 GHz (+$125) </input>

<强>的JavaScript

parseInt(iMac[i].value); // the price

然后，您可以使用id属性保存项目的名称：

iMac[i].id; // the item name

有了这个想法，您可以简单地遍历所有已检查的输入：

var iMac = document.orderForm.iMac; // array of inputs
var totalOrder = "";                // list all checked ids
var totalCost = 0;                  // add values to calculate cost

for (var i = 0; i < iMac.length; i++){
    if (iMac[i].checked) {
        totalOrder += iMac[i].id + " ";       // add ids separated by spaces
        totalCost += parseInt(iMac[i].value); // add value attributes, assuming they are integers
    }
}

Here is a Fiddle for a full working example

方法2 - 使用id属性来确定价格

您可以在switch的{​​{1}}上使用id声明来确定价格：

<强> HTML

input

<强>的JavaScript

<input type="checkbox" name="iMac" id="iMacPC" value="iMacPC"> iMacPC </input>
<h3>Add ons</h3>
<input type="checkbox" name="iMac" id="ram" value="Ram"> 16 GB RAM (+$175) </input>
<input type="checkbox" name="iMac" id="harddrive" value="Harddrive"> 1 TB HD (+200) </input>
<input type="checkbox" name="iMac" id="guaranteed" value="Guaranteed"> Extended Guarantee (+$150) </input>
<input type="checkbox" name="iMac" id="processor" value="Processor"> Core i7-4700HQ 2.4 GHz (+$125) </input>

或者你可以使用2d数组和var iMac = document.orderForm.iMac; // array of inputs var totalOrder = ""; // list all checked item names from value var totalCost = 0; // add values to calculate cost for (var i = 0; i < iMac.length; i++){ if (iMac[i].checked) { totalOrder += iMac[i].value + " "; // add values separated by spaces for list of item names totalCost += getPrice(iMac[i].id); // add value attributes, assuming they are integers } } function getPrice(id) { switch (id) { case "iMacPC": return 600; case "ram": return 175; case "harddrive": return 200; case "guaranteed": return 150; case "processor": return 125; default: return 0; } } 循环：

for

Here is a Fiddle for using a switch statement

And here is a Fiddle for using a 2d array and a for loop

相关提示

提示1 - 使用function getPrice(id) { var prices = [ ["iMacPC", 600], ["ram", 175], ["harddrive", 200], ["guaranteed", 200], ["processor", 125] ]; for(var i = 0; i < prices.length; i++) { if (id === prices[i][0]) { return prices[i][1]; } } return 0; }

上的action属性

而不是使用：

form

您应该使用：

<form>
  <input type="button" onclick="computer();">Button</input>
</form>

当用户在表单处于焦点时按“输入”时，默认行为是通过执行操作来提交表单。通过使用<form action="javascript:computer()"> <input type="submit">Button</input> </form> 属性和action类型输入，如果按下，您将捕获'enter'键。这将为用户提供预期结果并避免意外重新加载页面（在某些情况下可能会发生这种情况）。

提示2 - 始终使用结束标记

总是关闭你的标签是一个好主意。如果标签未正确关闭，则可能无法正确呈现，或者浏览器可能会忽略/删除它。

这一行：

submit

会更好：

<input type="checkbox" name="iMac" value="iMacPC">

提示3 - 不要使用JavaScript来计算最终价格

如果您计划实际向用户收费，请确保在服务器端生成帐单。如果您使用JavaScript（客户端）的价格，用户可以轻松地将此数字更改为他/她想要的任何数字，并且可能会抢劫您的付款。