用於更新購物車小計的JavaScript

Question

以下JavaScript代碼有問題。 它有一個錯誤警報，指出表值未定義。 我正在嘗試通過計算price * qty更新每一行的小計。

function updateSubtotal() {
       var subTotal = 0;
       var tables = document.getElementsByTagName("table").rows;
       var r = this.parentNode.parentNode.rowIndex;
       var j = document.getElementsByTagName(".price").cellIndex;
       var s = document.getElementsByTagName(".subtotal").cellIndex;
       var price = tables[r].cells[j].value;
       var quantity = document.getElementsByTagName("input").value;
       var subAmount = price * quantity;
       subTotal += Number(subAmount);
       // set total for the row
       document.getElementsByTagName('table').rows[r].cells[s].innerHTML = '$' + subTotal.toFixed(2);
       }
     updateTotal();
}

我嘗試更新的原始代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    window.onload = setupCart;

    function setupCart() {
      var qtyInputs = document.querySelectorAll( 'input' );
      for ( var i = 0; i < qtyInputs.length; i++ ) {
        qtyInputs[ i ].oninput = updateSubtotal;
      }
      updateTotal();
    }



    function updateTotal() {
      var total = 0;
      var subTotals = document.querySelectorAll( '.subtotal' );
      for ( var i = 0; i < subTotals.length; i++ ) {
        var amount = subTotals[ i ].innerHTML.match( /[0-9]+.[0-9]+/ );
        total += Number( amount );
      }
      document.querySelector( '#total' ).innerHTML = '$' + total.toFixed( 2 );
    }
  </script>
</head>
<body>


  ><table>
    ><tr>
      ><th>Description</th>
      ><th>Each</th>
      ><th>Qty</th>
      ><th>subtotal</th>
    ></tr>

    <tr class="item">
      <td class="description"><a href=""><img src="red-shirt.jpg" alt="" />Red Crew Neck T-Shirt</a></td>
      <td class="price">$15.00</td>
      <td><input type="number" value="1" min="0" /></td>
      <td class="subtotal">$15.00</td>
    </tr>

    <tr class="item">
      <td class="description"><a href=""><img src="tropical-shirt.jpg" alt="" />Blue Tropical Floral Print T-Shirt</a></td>
      <td class="price">$25.00</td>
      <td><input type="number" value="1" min="0" /></td>
      <td class="subtotal">$25.00</td>
    </tr>

    <tr class="item">
      <td class="description"><a href=""><img src="black-sneakers.jpg" alt="" />Black Canvas Lace Up Sneakers</a></td>
      <td class="price">$35.00</td>
      <td><input type="number" value="1" min="0" /></td>
      <td class="subtotal">$35.00</td>
    </tr>

    <tr class="item">
      <td class="description"><a href=""><img src="black-grey-jacket.jpg" alt="" />Black and Grey Hooded Jacket</a></td>
      <td class="price">$40.00</td>
      <td><input type="number" value="1" min="0" /></td>
      <td class="subtotal">$40.00</td>
    </tr>

    <tr class="item">
      <td class="description"><a href=""><img src="black-sunglasses.jpg" alt="" />Black Retro Sunglasses</a></td>
      <td class="price">$15.00</td>
      <td><input type="number" value="1" min="0" /></td>
      <td class="subtotal">$15.00</td>
    </tr>

    <tr class="cart-summary">
      <td></td>
      <td></td>
      <th>Total:</th>
      <td id="total"></td>
    </tr>

  </table>



</body>
</html>

Answer 1

.getElementsByTagName()函數返回NodeList對象。 如果要頁面上的第一個<table> ，則可以使用

document.getElementsByTagName("table")[0].rows ...

最好在函數開始時只獲取一次：

var table = document.getElementsByTagName("table")[0];

避免必須重新遍歷DOM。

Answer 2

也許是因為document.getElementsByTagName不會返回一個元素，而是返回一個元素列表...您必須像此document.getElementsByTagName（“ table”）[0] .rows一樣訪問所需的節點。

用於更新購物車小計的JavaScript

問題描述

2 個解決方案

解決方案1
0 2014-10-03 14:08:46

解決方案2
0 2014-10-03 14:12:18

用於更新購物車小計的JavaScript

問題描述

2 個解決方案

解決方案1 0 2014-10-03 14:08:46

解決方案2 0 2014-10-03 14:12:18

解決方案1
0 2014-10-03 14:08:46

解決方案2
0 2014-10-03 14:12:18