运行总计-购物车-HTML/Javascript

我到处寻找解决办法。以下是我试图完成的：我有一个学校项目，是一个有购物车的网页。购物车需要有一个基于用户输入的每个项目的数字运行总数。用户需要能够在数量中输入一个数字，然后更改它并动态更新总价。目前我们只使用javascript和HTML来实现这一点（还没有AJAX或其他任何东西）。我得到的结果是总面积只有0。这是HTML

<div class="column col4"><h3>Quantity</h3>
        <ul class="products">
          <li><input oninput="subTotal('price1','quantity1', 'sub1'); runningTotal()" id="quantity1" name="quantity" placeholder="0" size="3"></li>
          <li><input oninput="subTotal('price2','quantity2', 'sub2'); runningTotal()" id="quantity2" name="quantity" placeholder="0" size="3"></li>
          <li><input oninput="subTotal('price3','quantity3', 'sub3'); runningTotal()" id="quantity3" name="quantity" placeholder="0" size="3"></li>
          <li><input oninput="subTotal('price4','quantity4', 'sub4'); runningTotal()" id="quantity4" name="quantity" placeholder="0" size="3"></li>
          <li><input oninput="subTotal('price5','quantity5', 'sub5'); runningTotal()" id="quantity5" name="quantity" placeholder="0" size="3"></li>
          <li><input oninput="subTotal('price6','quantity6', 'sub6'); runningTotal()" id="quantity6" name="quantity" placeholder="0" size="3"></li>
          <li><input oninput="subTotal('price7','quantity7', 'sub7'); runningTotal()" id="quantity7" name="quantity" placeholder="0" size="3"></li>
          <li><input oninput="subTotal('price8','quantity8', 'sub8'); runningTotal()" id="quantity8" name="quantity" placeholder="0" size="3"></li>

数量

忽略“小计”功能，因为它的功能非常好。我遇到的问题是“runningTotal”函数。这是所有的价格

<div class="column col3"><h3>Price</h3>
    <ul class="products">
      <li id="price1" name="price" value="1.00">$1.00</li>
      <li id="price2" name="price" value="2.00">$2.00</li>
      <li id="price3" name="price" value="3.00">$3.00</li>
      <li id="price4" name="price" value="4.00">$4.00</li>
      <li id="price5" name="price" value="5.00">$5.00</li>
      <li id="price6" name="price" value="6.00">$6.00</li>
      <li id="price7" name="price" value="7.00">$7.00</li>
      <li id="price8" name="price" value="8.00">$8.00</li>
    </ul>
  </div>

价格

$1.00
$2.00
$3.00
$4.00
$5.00
$6.00
$7.00
$8.00

下面是Javascript

function runningTotal() {
    var quantity = document.getElementsByName("quantity");
    var price = document.getElementsByName("price");
    var total = 0;
    for (var i = 0; i < 8; i++) {
            total += parseInt(quantity[i].value,10) * parseInt(price[i].value, 10);
            console.log(total);
    }
    document.getElementById("runtotal").innerHTML = total;
}

函数runningTotal（）{
var数量=document.getElementsByName（“数量”）；
var price=document.getElementsByName（“价格”）；
var合计=0；
对于（变量i=0；i<8；i++）{
总计+=parseInt（数量[i]。价值，10）*parseInt（价格[i]。价值，10）；
控制台日志（总计）；
}
document.getElementById（“runtotal”）.innerHTML=total；
}

---

该函数的思想是循环遍历数量和价格，并将它们相乘以更新总数。这将在input（）上进行，因此每次数字更改时，函数都应该运行。然而，所发生的一切是一个0出现在总数中，并且永远不会改变。我知道这是实现我最终目标的一种非常糟糕的方式，但这是我们目前被指示的方式。任何和所有的帮助将不胜感激

您得到的结果无效，因为名称为

quantity

的输入字段没有

值。由于没有
值
，函数
parseInt（数量[i].value，10）
将给出
NaN
作为结果，所有进一步的计算将导致错误。
将函数调用
parseInt（数量[i].value，10）
替换为
parseInt（数量[i].value | | 0，10）
，以解决此问题。如果
数量[i]，这将使用
0
作为数量。值
为
未定义

请参阅下面的代码


函数runningTotal（）{
var数量=document.getElementsByName（“数量”）；
var price=document.getElementsByName（“价格”）；
var合计=0；
对于（变量i=0；i<8；i++）{
总计+=parseInt（数量[i]。值| | 0,10）*parseInt（价格[i]。值| | 0,10）；
}
document.getElementById（“runtotal”）.innerHTML=total；
}
函数小计（）{}

量










价格

$1.00
$2.00
$3.00
$4.00
$5.00
$6.00
$7.00
$8.00

你是救命恩人！我准备把头发拔出来。这已经解决了问题，它现在工作得很好！非常感谢你！