總計-購物車-HTML / Javascript

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)即可解決此問題。 如果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">$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>