Is there a way to automatically recalculate the "Total Price" when the input values are adjusted?

Question

Is there a way to automatically recalculate the "Total Price" when the input values are adjusted?

Whenever I add an item to the cart, it gets appended to the row in the shopping cart, and the price adjusts accordingly. However, I'm having trouble getting the price to adjust whenever I change the input values (input type: "number"). I can't seem to find the correct format for this. Can someone help me out? Your feedback is greatly appreciated. Here to learn!

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Commerce Website</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    <div class="wrapper">
        <div class="p1" id="p1">
            <div class="topnavcont">
                <ul class="topleftnav">
                <a href="#p1"><li class="topnavlink">Home</li></a>
                <a href="#p2"><li class="topnavlink">Shop</li></a>
            </ul>
            <h1 class="topnavtitle">The Store</h1>
            <div class="navcartcontainer">
                <h3 class="totalnumber">0</h3>
                <i class="fas fa-shopping-cart" id="cartbtn"></i>
            </div>
            </div>

            <!-- <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg"> -->
            
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="clark-street-mercantile-P3pI6xzovu0-unsplash.jpg" alt="" class="bgimg"><div class="overlay"></div></div>

                    <div class="swiper-slide"><img src="michela-ampolo-7tDGb3HrITg-unsplash.jpg" alt="" class="bgimg"><div class="overlay"></div></div>

                    <!-- <div class="swiper-slide">Slide 3</div>
                    ... -->
                    </div>
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>
                
                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev arrow"></div>
                    <div class="swiper-button-next arrow"></div>
                
                    <!-- If we need scrollbar -->
                    <div class="swiper-scrollbar"></div>
                </div>
            <div class="cartbody">
                <i class="fal fa-times" id="closeicon"></i>
                <h2 class="carttitle">Shopping Cart</h2>
                <ul class="cartitems">
                    
                </ul>
                <h3 class="actualprice carttotal"id="actualprice">Total: $0</h3>
                <button class="purchasebtn" id="purchasebtn">Purchase</button>
                
            </div>
        </div>

<div class="p2" id="p2">
    <h1 class="p2title">My Shop</h1>
    <div class="itemcontainer">
  
</div>
    <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="app.js"async></script>
</body>
</html>

CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
::-webkit-scrollbar{
    display: none;
}
.wrapper{
    overflow-x: hidden;
}


/* Rest of the CSS code remains unchanged */

JAVASCRIPT:

    let TotalNumber = document.querySelector(".totalnumber");
    // JS code has been removed for brevity

javascript html css

Answer 1

Answer №1

One issue arises when you adjust the quantity of an item in your shopping cart, as the price is incorrectly recalculated each time.

For example, if you currently have "Red Shoes" in your Cart priced at $4.99,

When you increase the quantity by one, the total is miscalculated and now shows $14.97 (initial $4.99 + 2 multiplied by the unit price).

To resolve this, it's recommended to save the original quantity before making changes and then subtract it from the total before adding more items:

(originalPrice - unitPrice * oldQuantity + unitPrice * newQuantity).toFixed(2);

I hope this explanation clarifies things for you. Have a wonderful day! Feel free to reach out if you require further assistance. (:

Answer 2

One issue arises when you adjust the quantity of an item in your shopping cart, as the price is incorrectly recalculated each time.

For example, if you currently have "Red Shoes" in your Cart priced at $4.99,

When you increase the quantity by one, the total is miscalculated and now shows $14.97 (initial $4.99 + 2 multiplied by the unit price).

To resolve this, it's recommended to save the original quantity before making changes and then subtract it from the total before adding more items:

(originalPrice - unitPrice * oldQuantity + unitPrice * newQuantity).toFixed(2);

I hope this explanation clarifies things for you. Have a wonderful day! Feel free to reach out if you require further assistance. (:

Answer 3

Answer №2

Here's the modified portion, with redundant code removed:

function updateAmounts() {
  let total = 0
  document.querySelectorAll(".qinput").forEach(el => {
    let qty = +el.value
    let price = +el.closest('.cartitem').querySelector('.itemprice').innerText.trim().replace('$', '');
    total += (qty * price);
  })
  document.querySelector(".actualprice").innerHTML = `Total: $${total.toFixed(2)}`
}
document.querySelectorAll(".qinput").forEach(el => el.addEventListener("change", (e) => updateAmounts()))

The functionality includes:

Updating totals when quantity changes in a .qinput field
Calculation of total by iterating through all relevant fields and multiplying the quantity by their respective prices

Answer 4

Here's the modified portion, with redundant code removed:

function updateAmounts() {
  let total = 0
  document.querySelectorAll(".qinput").forEach(el => {
    let qty = +el.value
    let price = +el.closest('.cartitem').querySelector('.itemprice').innerText.trim().replace('$', '');
    total += (qty * price);
  })
  document.querySelector(".actualprice").innerHTML = `Total: $${total.toFixed(2)}`
}
document.querySelectorAll(".qinput").forEach(el => el.addEventListener("change", (e) => updateAmounts()))

The functionality includes:

Updating totals when quantity changes in a .qinput field
Calculation of total by iterating through all relevant fields and multiplying the quantity by their respective prices

Is there a way to automatically recalculate the "Total Price" when the input values are adjusted?

Answer №1

Answer №2

Similar questions

Using jQuery to toggle the visibility of div elements while displaying an indicator

Modify the heading color of elements in a class to a distinct color when the cursor hovers over the element

Do we really need Renderer2 in Angular?

Angular array mapping techniques

Achieving an element placement in a navigation bar with flexbox and grid layout | HTML and CSS exclusive techniques

Code error: JSON unexpected token "&" encountered

UI Router: Easily navigate to a specific route by entering the URL directly

Do not use the .map method! Caution: Every child component in a list must be assigned a unique "key" prop

The ComponentDidUpdate function treats the previous state (prevState) and the current state (this

Unable to utilize Bower due to a node.js malfunction

iterating over a list of files using JavaScript

What is the method to escape from a for loop in Protractor?

The dependencies were not updated after running `npm install`

Using mongoose to differentiate whether an update-upsert operation is performing an insert or an update

I'm wondering why this isn't working properly and not displaying the closing form tag

Adjust a Javascript script to choose the best font color for use in R Shiny applications

AngularJS: The art of object pushing

Encounter Issue: "Describe" function not recognized. This error occurred during the activation of Mocha Test

How do I activate the <li> tag using jQuery?

Combining Strings and Integers in Javascript