Update price counter when quantity changes

i have this product listing and I need to create a function for this product listing, when the quantity of the product changes the price of the product should also change with the quantity and I need to implement this method to all the products I have

here’s the HTML code for one product I’ve been working on

<div class="box">

        <span class="discount">-33%</span>

        <div class="icons">

          <a href="#" class="fas fa-heart"></a>

          <a href="#" class="fas fa-share"></a>

          <a href="#" class="fas fa-eye"></a>

        </div>

        <img src="v-images/product-1.png" alt="" />

        <h3>Carrots</h3>

        <div class="price">$10.50 Per Kg</div>

        <div class="quantity">

          <span>quantity : </span>

          <input type="number" min="1" max="1000" value="1" />

          <span> kg </span>

        </div>

        <a href="#" class="btn">add to cart</a>

      </div>

Hi, you’d need JavaScript for that. Have you any experience with JS so far?

can you please help me ?

i’m a beginner so very little experience with javascript

can you please check it the function works with one product put It doesn’t work with the other product

HTML CODE

<h1>this works </h1>

<div class="box">
<!--         <span class="discount">-33%</span> -->
        <div class="icons">
          <a href="#" class="fas fa-heart"></a>
          <a href="#" class="fas fa-share"></a>
          <a href="#" class="fas fa-eye"></a>
        </div>
        <img src="dfruits-images/product-1.png" alt="" />
        <h3>Almonds</h3>

        <div class="price">
          <p>Price Per ticket : $<span id="ticket_price">7</span></p>
          <p>Subtotal : <b>$<span id="total">0</span></b></p>
        </div>
        <div class="quantity">
          <span>quantity : </span>
          <input type="number" id="num" oninput="calc()" min="1" max="1000" value="1" />
          <span> kg </span>
        </div>
        <a href="#" class="btn">add to cart</a>
      </div>

<h1>----------------------------------------------</h1>

<h1>this one doesn't work</h1>

<div class="box">
        <span class="discount"></span>
        <div class="icons">
          <a href="#" class="fas fa-heart"></a>
          <a href="#" class="fas fa-share"></a>
          <a href="#" class="fas fa-eye"></a>
        </div>
        <img src="dfruits-images/product-1.png" alt="" />
        <h3>Almonds</h3>

        <div class="price">
          <p>Price Per ticket : $<span id="ticket_price">7</span></p>
          <p>Subtotal : <b>$<span id="total">0</span></b></p>
        </div>
        <div class="quantity">
          <span>quantity : </span>
          <input type="number" id="num" oninput="calc()" min="1" max="1000" value="1" />
          <span> kg </span>
        </div>
        <a href="#" class="btn">add to cart</a>
      </div>


<h1>----------------------------------------------</h1>

JavaScript code :

function calc() 
{
  var price = document.getElementById("ticket_price").innerHTML;
  var noTickets = document.getElementById("num").value;
  var total = parseFloat(price) * noTickets
  if (!isNaN(total))
    document.getElementById("total").innerHTML = total
}

the price counter is not updating for other product these products have the same id but it’s not updating it

here is the code pen link ----> https://codepen.io/ibadhussain/pen/mdmwOpY

<!--- this one works ------->

<div class="box">
<!--         <span class="discount">-33%</span> -->
        <div class="icons">
          <a href="#" class="fas fa-heart"></a>
          <a href="#" class="fas fa-share"></a>
          <a href="#" class="fas fa-eye"></a>
        </div>
        <img src="dfruits-images/product-1.png" alt="" />
        <h3>Almonds</h3>

        <div class="price">
          <p>Price Per ticket : $<span id="ticket_price">7</span></p>
          <p>Subtotal : <b>$<span id="total">0</span></b></p>
        </div>
        <div class="quantity">
          <span>quantity : </span>
          <input type="number" id="num" oninput="calc()" min="1" max="1000" value="1" />
          <span> kg </span>
        </div>
        <a href="#" class="btn">add to cart</a>
      </div>

<!---------------------------------------->

<!--- this one  doesn't works ------->

<div class="box">
        <span class="discount"></span>
        <div class="icons">
          <a href="#" class="fas fa-heart"></a>
          <a href="#" class="fas fa-share"></a>
          <a href="#" class="fas fa-eye"></a>
        </div>
        <img src="dfruits-images/product-2.png" alt="" />
        <h3>Carrots</h3>

        <div class="price">
          <p>Price Per ticket : $<span id="ticket_price">7</span></p>
          <p>Subtotal : <b>$<span id="total">0</span></b></p>
        </div>
        <div class="quantity">
          <span>quantity : </span>
          <input type="number" id="num" oninput="calc()" min="1" max="1000" value="1" />
          <span> kg </span>
        </div>
        <a href="#" class="btn">add to cart</a>
      </div>



<!---------------------------------------->

javascript code

function calc() 
{
  var price = document.getElementById("ticket_price").innerHTML;
  var noTickets = document.getElementById("num").value;
  var total = parseFloat(price) * noTickets
  if (!isNaN(total))
    document.getElementById("total").innerHTML = total
}

You can’t have duplicate ids in html.
That is why you see the changes for only the first one and not the second.

so what should i do to make changes in all the products ?

Sorry, I got caught up earlier.

Have you tried using something like the map method to dynamically create the product cards and then in the calc function passing in a parameter to represent the id.

Maybe this stackoverflow answer can help

Good luck!

1 Like

Hi ibadhussain,

instead of using an ID to reference your span, you could add a class - name to the span elements. Then you use the function findElementByClassName to get an Array of all span elements.

Now you just have to go through all these span elements with the forEach function and update them to your liking.

best,
Dennis

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.