-1

I'm making a simple cart page for a website and wanted to have cart totals update dynamically. For some reason nothing adjusts though. I also don't receive an error or any activity in the console which makes me wonder if I'm using class names improperly. It's been a long time since I've tried this so apologies for forgetting how haha. Here is my html:

<tr>
                <td>
                    <div class="cart-info">
                        <img src="images/watercolor2.jpg">
                        <div>
                            <p>Watercolor Set</p>
                            
                            <div class="price" data-amount="25.00">Price: $25.00</div><br>
                            <a href="">Remove</a>
                        </div>
                    </div>
                </td>
                <td><input class="quantity" type="number" value="0"></td>
                <td class="total">$0.00</td>
            </tr>

and js:

var quantity = document.getElementsByClassName("quantity");

Array.prototype.forEach.call(quantity, update);

function update(val, i){
  val.addEventListener('input', function(){
    var x = val.value;
    document.getElementsByClassName('total')[i].innerHTML = "$" +
      (x*document.getElementsByClassName('price')[i].getAttribute("data-amount")).toFixed(2);
  });
};

I've double checked the script src is spelled properly and is posted above the tag in the html file...what am I overlooking? Is there a better approach?

1 Answer 1

0

This is how I'd approach it. Use querySelectorAll in concert with closest(), applying the function through an input event listener. Also, you can access the data-amount via the dataset property

const doGrandTotal = () => {
  let gtotal = 0;
  document.querySelectorAll('.total').forEach(t => {
    gtotal += +t.innerText.replaceAll("$", "")
  })
  document.querySelector('#gtotal').innerText = `$${gtotal.toFixed(2)}`;
}
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.quantity').forEach(q => {
    q.addEventListener('input', e => {
      let p = +e.target.closest('tr').querySelector('[data-amount]').dataset.amount * +e.target.value;
      e.target.closest('tr').querySelector('.total').innerText = `$${p.toFixed(2)}`;
      doGrandTotal()
    })
  })
  doGrandTotal()
})
<table>
  <tr>
    <td>
      <div class="cart-info">
        <img src="images/watercolor2.jpg">
        <div>
          <p>Watercolor Set</p>

          <div class="price" data-amount="25.00">Price: $25.00</div><br>
          <a href="">Remove</a>
        </div>
      </div>
    </td>
    <td><input class="quantity" type="number" value="0"></td>
    <td class="total">$0.00</td>
  </tr>
  <tr>
    <td>
      <div class="cart-info">
        <img src="images/watercolor2.jpg">
        <div>
          <p>Watercolor Set</p>

          <div class="price" data-amount="25.00">Price: $25.00</div><br>
          <a href="">Remove</a>
        </div>
      </div>
    </td>
    <td><input class="quantity" type="number" value="0"></td>
    <td class="total">$0.00</td>
  </tr>
</table>
<hr> Grand total: <span id='gtotal'></span>

3
  • Oh this is great, thank you ! What would be the best way to sum all of the totals at as a subtotal?
    – AstralV
    Nov 22, 2022 at 0:32
  • I added a function for that at the end. It runs when the page loads so there can be a $0.00 to start.
    – Kinglish
    Nov 22, 2022 at 0:46
  • @AstralV - was this helpful? If so, consider marking it as the solution (clicking the checkmark to the left of the answer) and/or upvoting. It's the best way of expressing gratitude on this site when someone helps.
    – Kinglish
    Nov 28, 2022 at 21:06

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.