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

我对这段代码很失望，希望你能帮我一点忙

正如你所看到的，我正试图将此代码设置为一个电子商务项目，有一台电脑的成本为600美元，然后有一些附加组件与额外的费用。在“功能计算机”中，我验证检查结果，但我想创建一个显示购买总额的函数，主要产品是计算机加上附加组件

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

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

我有这个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";
    }
  }
}

方法1-使用“值”属性保存成本 通过将价格存储在value属性中，您可以轻松地将其转换为整数并将其添加到总计：

HTML

然后，您可以使用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
    }
}

JavaScript

相关提示 技巧1-在表单上使用action属性 而不是使用：

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

最好是：

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

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

---

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

您的问题似乎就在这里ifiMac.checked==null。不要检查strict null，如果需要，请尝试！iMac。checked@elclanrs很好，我现在就做，但是你的评论并没有回答我的问题。我需要为每个复选框设置一个值$。我的意思是，如果计算机的价格是600美元，而客户选择的计算机和RAM附加组件的价格是175美元，那么函数将返回购买的总额，在这种情况下为775美元；它将值作为字符串而不是整数添加。强制1为整数，稍后添加字符串以计算复选框中的所有值。比如txt+=parseNemic[i]。值

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

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

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

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

<form action="javascript:computer()">
  <input type="submit">Button</input>
</form>

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

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