Update product cost when modifying item count in JavaScript

Other Questions JavaScript
1

I’m working on a shopping cart feature where users can change the number of items they want to buy. I need help figuring out how to update the price when the quantity changes. Here’s what I want to do:

  1. Change the price when someone clicks the plus button to add more items
  2. Adjust the price when someone clicks the minus button (but don’t let it go below one item)
  3. Update the price if someone types a new number in the quantity box

The tricky part is that the price is shown in HTML with the cents as superscript. I’m not sure how to change this dynamically. Also, I can’t just use a fixed price because it’s different for each product and comes from a database.

Here’s a simple example of what I’m working with:

function updateQuantity(change) {
  let count = parseInt(document.getElementById('itemCount').value, 10) || 0;
  count += change;
  if (count < 1) count = 1;
  document.getElementById('itemCount').value = count;
  // Need help updating the price here
}

document.getElementById('plus').onclick = () => updateQuantity(1);
document.getElementById('minus').onclick = () => updateQuantity(-1);

How can I make this work with the price display? Any ideas would be great!

2

To update the product cost dynamically, you’ll need to store the base price per item somewhere, perhaps as a data attribute on the price element. Here’s a approach you could take:

  1. Store the base price in a data attribute on the price element.
  2. Create a function to update the displayed price.
  3. Modify your updateQuantity function to call the price update function.

Here’s a basic implementation:

function updatePrice() {
    const count = parseInt(document.getElementById('itemCount').value, 10) || 1;
    const basePrice = parseFloat(document.getElementById('price').dataset.base);
    const totalPrice = (basePrice * count).toFixed(2);
    const [dollars, cents] = totalPrice.split('.');
    document.getElementById('price').innerHTML = `$${dollars}.<sup>${cents}</sup>`;
}

function updateQuantity(change) {
    let count = parseInt(document.getElementById('itemCount').value, 10) || 1;
    count += change;
    if (count < 1) count = 1;
    document.getElementById('itemCount').value = count;
    updatePrice();
}

document.getElementById('itemCount').oninput = updatePrice;

Remember to set the data-base attribute on your price element with the item’s base price from your database.

3

I’ve dealt with similar issues in my e-commerce projects. Here’s what worked for me:

Store the base price as a data attribute on the price element, like others suggested. But also consider caching it in a variable to avoid repeated DOM lookups.

For updating the price, I found using a template literal with a regex replacement works well:

function updatePrice() {
  const count = Math.max(1, parseInt(document.getElementById('itemCount').value, 10) || 1);
  const basePrice = cachedBasePrice || parseFloat(document.getElementById('price').dataset.base);
  const total = (basePrice * count).toFixed(2);
  
  document.getElementById('price').innerHTML = total.replace(/(\d+)\.(\d+)/, '$$$1.<sup>$2</sup>');
}

This handles the superscript cents elegantly. Don’t forget to call updatePrice() in your quantity change handlers and add an input event listener to the quantity field for direct user input.

Also, consider debouncing the update function if you expect rapid input changes to improve performance.

4

hey Luke, seems like u need to track the base price somewhere. maybe add a data attribute to ur price element? then u can grab that, multiply by the quantity, and update the display. somethin like:

function updatePrice() {
  let basePrice = parseFloat(document.getElementById('price').dataset.base);
  let count = parseInt(document.getElementById('itemCount').value);
  let total = (basePrice * count).toFixed(2);
  // update display here
}

hope that helps!