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

Question

我四处寻找解决方案。这是我想要完成的：我有一个学校项目，该项目是一个带有购物车的网页。购物车需要有一个运行ning 总数，基于用户为每个项目输入的数字。用户需要能够在数量中输入一个数字，然后更改它并动态更新总价。目前我们只使用 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>

忽略 "subTotal" 函数，因为它运行良好。我遇到问题的是 "runningTotal" 函数。这是全部价格HTML

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

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

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

Answer 1

您得到的结果无效，因为名称为 quantity 的输入字段没有 value。由于没有 value，函数 parseInt(quantity[i].value, 10) 将给出 NaN 作为结果，所有进一步的计算都将导致错误。将函数调用 parseInt(quantity[i].value, 10) 替换为 parseInt(quantity[i].value || 0, 10) 以解决问题。如果 quantity[i].value 是 undefined.

，这将使用 0 作为数量

查看下面的代码。

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 || 0, 10) * parseInt(price[i].value || 0, 10);
  }
  document.getElementById("runtotal").innerHTML = total;
}

function subTotal() {}

<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>
  </ul>
</div>
<div class="column col3">
  <h3>Price</h3>
  <ul class="products">
    <li id="price1" name="price" value="1.00">.00</li>
    <li id="price2" name="price" value="2.00">.00</li>
    <li id="price3" name="price" value="3.00">.00</li>
    <li id="price4" name="price" value="4.00">.00</li>
    <li id="price5" name="price" value="5.00">.00</li>
    <li id="price6" name="price" value="6.00">.00</li>
    <li id="price7" name="price" value="7.00">.00</li>
    <li id="price8" name="price" value="8.00">.00</li>
  </ul>
</div>
<div id="runtotal"></div>

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

Running total - shopping cart - HTML/Javascript

html

javascript

shopping-cart

function

cumulative-sum

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

Running total - shopping cart - HTML/Javascript

html

javascript

shopping-cart

function

cumulative-sum

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