Question

我已经搜索了高低解决方案。这是我想要实现的目标：我有一个学校项目，这是一个有购物车的网页。购物车需要具有基于用户输入每个项目的数量的运行总计。用户需要能够在数量中输入数字，然后更改它并动态更新总价格。目前我们只使用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">$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>

这是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)以解决问题。如果0为quantity[i].value，则会使用undefined作为数量。

请参阅下面的代码。

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">$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>
<div id="runtotal"></div>

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

1 个答案: