更改总价格字段以不反映

Question

以下是我的html代码和onchange（）。我没有收到任何错误消息，但是我需要在

中进行更改

html用于购物车，其中购物车中的每种产品都有列，每行的最后一列是产品的总价，随着我们增加数量，该价格需要更改。

function WO() {
  var tbody = document.getElementById("cartSection");

  for (var i = 0; i < tbody.rows.length; i++) {
    var row = tbody.rows[i];
    var qty = row.cells[3].childNodes[0].value;

    var price = row.cells[2].childNodes[0].nodeValue;


    var answer = (Number(qty) * Number(price)).toFixed(2);
    row.cells[5].childNodes[0].nodeValue = answer;


  }
  document.getElementById("inputNumber").onchange = function() {
    myFunction()
  };

  function myFunction() {
    row.cells[5].childNodes[0].nodeValue = (Number(qty) * Number(price)).toFixed(2);
  };
};
WO();

<div class="cart-section">
  <table class="table cart-table table-responsive-xs striped-table">
    <thead>
      <tr class="table-head">
        <th scope="col">image</th>
        <th scope="col">product name</th>
        <th scope="col">price</th>
        <th scope="col">quantity</th>
        <th scope="col">action</th>
        <th scope="col">total</th>
      </tr>
    </thead>
    <tbody id="cartSection">
      <tr>
        <td>
          <a href="#"><img src="/web/product/89/1569065085-thumb.jpg" alt=""></a>
        </td>
        <td><a href="#">Black formal shoe</a>

        </td>
        <td class="amount">
          449.00</td>
        <td>
          <input type="number" name="quantity" id="inputNumber" class="form-control input-number" value="2" onchange="myFunction">
        </td>

        <td><a href="#" class="icon"><i class="ti-close"></i></a></td>
        <td class="totalprice">898.00</td>
      </tr>
      <tr>
        <td>
          <a href="#"><img src="/web/product/94/1569065206-thumb.jpg" alt=""></a>
        </td>
        <td><a href="#">Slim brown leather shoe</a>

        </td>
        <td class="amount">
          800.00</td>
        <td>
          <input type="number" name="quantity" id="inputNumber" class="form-control input-number" value="2" onchange="myFunction">
        </td>

        <td><a href="#" class="icon"><i class="ti-close"></i></a></td>
        <td class="totalprice">1600.00</td>
      </tr>
      <tr>
        <td>
          <a href="#"><img src="/web/product/93/1569065178-thumb.jpg" alt=""></a>
        </td>
        <td><a href="#">Dual Colour Formal</a>

        </td>
        <td class="amount">
          500.00</td>
        <td>
          <input type="number" name="quantity" id="inputNumber" class="form-control input-number" value="2" onchange="myFunction">
        </td>

        <td><a href="#" class="icon"><i class="ti-close"></i></a></td>
        <td class="totalprice">1000.00</td>
      </tr>
    </tbody>

  </table>

  <table class="table cart-table table-responsive-md">
    <tfoot>
      <tr>
        <td>total price :</td>
        <td>
          <h2>$6935.00</h2>
        </td>
      </tr>
    </tfoot>
  </table>
  <div class="row cart-buttons">
    <div class="col-6"><a href="/site/index" class="btn btn-solid">continue shopping</a></div>
    <div class="col-6"><a href="#" class="btn btn-solid">check out</a></div>
  </div>
</div>

Answer 1

这是一个开始。你有很多问题

function WO() {
  var tbody = document.getElementById("cartSection");

  for (var i = 0; i < tbody.rows.length; i++) {
    var row = tbody.rows[i];
    var qty = row.cells[3].childNodes[0].value;

    var price = row.cells[2].childNodes[0].nodeValue;


    var answer = (Number(qty) * Number(price)).toFixed(2);
    row.cells[5].childNodes[0].nodeValue = answer;


  }
  document.getElementById("cartSection").addEventListener("change",function(e) {
    var tgt = e.target;
    if (tgt.name==="quantity") {
      var row = tgt.closest("tr");
      var qty =  Number(tgt.value); 
      var amt =  Number(row.querySelector(".amount").innerText.trim());
      console.log(qty,amt)
      row.querySelector(".totalprice").innerText = (amt*qty).toFixed(2);

    }  
  })
};
WO();

<div class="cart-section">
  <table class="table cart-table table-responsive-xs striped-table">
    <thead>
      <tr class="table-head">
        <th scope="col">image</th>
        <th scope="col">product name</th>
        <th scope="col">price</th>
        <th scope="col">quantity</th>
        <th scope="col">action</th>
        <th scope="col">total</th>
      </tr>
    </thead>
    <tbody id="cartSection">
      <tr>
        <td>
          <a href="#"><img src="/web/product/89/1569065085-thumb.jpg" alt=""></a>
        </td>
        <td><a href="#">Black formal shoe</a>

        </td>
        <td class="amount">
          449.00</td>
        <td>
          <input type="number" name="quantity" class="form-control input-number" value="2">
        </td>

        <td><a href="#" class="icon"><i class="ti-close"></i></a></td>
        <td class="totalprice">898.00</td>
      </tr>
      <tr>
        <td>
          <a href="#"><img src="/web/product/94/1569065206-thumb.jpg" alt=""></a>
        </td>
        <td><a href="#">Slim brown leather shoe</a>

        </td>
        <td class="amount">
          800.00</td>
        <td>
          <input type="number" name="quantity" class="form-control input-number" value="2">
        </td>

        <td><a href="#" class="icon"><i class="ti-close"></i></a></td>
        <td class="totalprice">1600.00</td>
      </tr>
      <tr>
        <td>
          <a href="#"><img src="/web/product/93/1569065178-thumb.jpg" alt=""></a>
        </td>
        <td><a href="#">Dual Colour Formal</a>

        </td>
        <td class="amount">
          500.00</td>
        <td>
          <input type="number" name="quantity" class="form-control input-number" value="2">
        </td>

        <td><a href="#" class="icon"><i class="ti-close"></i></a></td>
        <td class="totalprice">1000.00</td>
      </tr>
    </tbody>

  </table>

  <table class="table cart-table table-responsive-md">
    <tfoot>
      <tr>
        <td>total price :</td>
        <td>
          <h2>$6935.00</h2>
        </td>
      </tr>
    </tfoot>
  </table>
  <div class="row cart-buttons">
    <div class="col-6"><a href="/site/index" class="btn btn-solid">continue shopping</a></div>
    <div class="col-6"><a href="#" class="btn btn-solid">check out</a></div>
  </div>
</div>

更新：触发每个更改以从头开始计算。这里缺少的全部是

window.addEventListener("load", function() {
  [...document.querySelectorAll("[name=quantity]")].forEach(function(qty) {
    qty.addEventListener("change", function(e) {
      var tgt = e.target;
      var row = tgt.closest("tr");
      var qty = Number(tgt.value);
      var amt = Number(row.querySelector(".amount").innerText.trim());
      row.querySelector(".totalprice").innerText = (amt * qty).toFixed(2);
    });
  });
  var event = new Event('change');
  // Dispatch it.
  [...document.querySelectorAll("[name=quantity]")].forEach(function(qty) {
    qty.dispatchEvent(event);
  })

})

<div class="cart-section">
  <table class="table cart-table table-responsive-xs striped-table">
    <thead>
      <tr class="table-head">
        <th scope="col">image</th>
        <th scope="col">product name</th>
        <th scope="col">price</th>
        <th scope="col">quantity</th>
        <th scope="col">action</th>
        <th scope="col">total</th>
      </tr>
    </thead>
    <tbody id="cartSection">
      <tr>
        <td>
          <a href="#"><img src="/web/product/89/1569065085-thumb.jpg" alt=""></a>
        </td>
        <td><a href="#">Black formal shoe</a>

        </td>
        <td class="amount">
          449.00</td>
        <td>
          <input type="number" name="quantity" class="form-control input-number" value="2">
        </td>

        <td><a href="#" class="icon"><i class="ti-close"></i></a></td>
        <td class="totalprice"></td>
      </tr>
      <tr>
        <td>
          <a href="#"><img src="/web/product/94/1569065206-thumb.jpg" alt=""></a>
        </td>
        <td><a href="#">Slim brown leather shoe</a>

        </td>
        <td class="amount">
          800.00</td>
        <td>
          <input type="number" name="quantity" class="form-control input-number" value="2">
        </td>

        <td><a href="#" class="icon"><i class="ti-close"></i></a></td>
        <td class="totalprice"></td>
      </tr>
      <tr>
        <td>
          <a href="#"><img src="/web/product/93/1569065178-thumb.jpg" alt=""></a>
        </td>
        <td><a href="#">Dual Colour Formal</a>

        </td>
        <td class="amount">
          500.00</td>
        <td>
          <input type="number" name="quantity" class="form-control input-number" value="2">
        </td>

        <td><a href="#" class="icon"><i class="ti-close"></i></a></td>
        <td class="totalprice"></td>
      </tr>
    </tbody>

  </table>

  <table class="table cart-table table-responsive-md">
    <tfoot>
      <tr>
        <td>total price :</td>
        <td>
          <h2>$6935.00</h2>
        </td>
      </tr>
    </tfoot>
  </table>
  <div class="row cart-buttons">
    <div class="col-6"><a href="/site/index" class="btn btn-solid">continue shopping</a></div>
    <div class="col-6"><a href="#" class="btn btn-solid">check out</a></div>
  </div>
</div>