Javascript - Adjust price when changing quantity

Question

I have a form to add product to basket where the user need to select quantity. I'm trying to adjust the price when quantity is modified. Here's my code:

  <script>
  function increaseValue() {
    var value = parseInt(document.getElementById('quantity').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('quantity').value = value;
  }

  function decreaseValue() {
    var value = parseInt(document.getElementById('quantity').value, 10);
    value = isNaN(value) ? 0 : value;
    value < 1 ? value = 1 : '';
    value--;
    document.getElementById('quantity').value = value;
  }
  </script>

  <div class="quantity-container">
  <span>1</span> 
 <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div> 
<input type="number" id="quantity" name="quantity" value="1" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</div>

I need to adjust the price for the following scenarios:

If quantity is increased using the 'increase' button
If quantity is decreased (but prevent zero quantity with $0.00 price)
If quantity is updated using the quantity text field

The problem is that the price is displayed using html between the numbers so i'm confused how to update the price. I assume I will have to use RegEx? I can't just hardcode the base price ($15.49 in this example) because the price is never the same (the prices come from SQL DB)

<div id="product-price">
$15<sup>.49</sup>
</div>

See https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML in combination with e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals and https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-dollars-currency-string-in-javascript — le_m, Nov 22 '17 at 04:42

score 2 · Accepted Answer · answered Nov 22 '17 at 05:03

Use ES6's Template literals (``). Try the following:

For more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

function increaseValue() {
  var value = parseInt(document.getElementById('quantity').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('quantity').value = value;
  price = '$'+`<span>${p * value}</span>`;
  document.getElementById('product-price').innerHTML=price;
}

function decreaseValue() {
  var value = parseInt(document.getElementById('quantity').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('quantity').value = value;
  price = '$'+`<span>${p * value}</span>`;
  document.getElementById('product-price').innerHTML=price;
}
var p='15.49';
var price = '$'+`<span>${p}</span>`;
document.getElementById('product-price').innerHTML=price;

<div id="myDiv">
  <div class="quantity-container">
  <span>1</span> 
  <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div> 
  <input type="number" id="quantity" name="quantity" value="1" />
  <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</div>

<div id="product-price">

</div>

Javascript - Adjust price when changing quantity

1 Answers1