Calculate discount % on a product in Vanilla JS

Question

Hi what I'm trying to do is calculate the percentage discount on products that are on sale using Vanilla JS. So if a sale price exists '.product-price__discount' then i'd want to work out the percentage off for that product.

So far I'm able to work out the discount on the first product. On the second product it seems to print the same discount as the first & the last product isn't on sale so this is correct that this is ignored. Also i know there's an error for .length but not sure how to solve it.

var pattern = /[^0-9\.]/g;
var price = document.querySelectorAll('.product-slab__price');

price.forEach(function(el){
if(!el.querySelector('.product-price__discount').length) {
    var wasPrice = parseFloat(document.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
    var newPrice = parseFloat(document.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;

    var subtractPrice = (wasPrice - newPrice);
    var dividePrice = (subtractPrice / wasPrice);
    var multiplyPrice = (dividePrice * 100);
    el.querySelector('.discountPercentage').innerHTML = multiplyPrice.toFixed(0) + "&#37";
  } 
  });

.product-price__was {
  text-decoration: line-through;
}
.product-price__discount {
  color: red;
}

<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">Was &euro;10,00</span>
    <span class="product-price__discount">Now &euro;8,00</span>
    <span class="discountPercentage" > </span>
  </div>
</div>

<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">&euro;15,00</span>
    <span class="product-price__discount">&euro;10,00</span>
    <span class="discountPercentage" > </span>
  </div>
</div>


<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__value">&euro;15,90</span>
    <span class="discountPercentage" > </span>
  </div>
</div>

Answer 1

The problem can be found here;

var wasPrice = parseFloat(document.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
var newPrice = parseFloat(document.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;

You are using document.querySelector, however, you'll need the el element provided by the forEach like so:

var wasPrice = parseFloat(el.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
var newPrice = parseFloat(el.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;

---

Also, to prevent the length error, check if the querySelector has found anything by checking for null, instead off .length:

if (el.querySelector('.product-price__discount') !== null) {

---

Take a look at this improved example:

var pattern = /[^0-9\.]/g;
var price = document.querySelectorAll('.product-slab__price');

price.forEach(function(el){
  if (el.querySelector('.product-price__discount') !== null) {
      var wasPrice = parseFloat(el.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
      var newPrice = parseFloat(el.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;

      var discount = 100 - (newPrice / wasPrice) * 100;
      el.querySelector('.discountPercentage').innerHTML = discount.toFixed(0) + "&#37";
    } 
});

.product-price__was {
  text-decoration: line-through;
}
.product-price__discount {
  color: red;
}

<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">Was &euro;10,00</span>
    <span class="product-price__discount">Now &euro;8,00</span>
    <span class="discountPercentage" > </span>
  </div>
</div>

<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">&euro;15,00</span>
    <span class="product-price__discount">&euro;10,00</span>
    <span class="discountPercentage" > </span>
  </div>
</div>


<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__value">&euro;15,90</span>
    <span class="discountPercentage" > </span>
  </div>
</div>