How to generate a subtotal amount using the DOM

Question

i'm trying to generate a simple subtotal amount for a small shopping cart project and it does not seem like the function can see the input value

my input HTML is: <input id="valueTest1" type="text" value="0" data-price="10.99">

and i just need simply the data-price to * the value entered and then show in my subtotal HTML (shown below)

<div id="itemTotal1" class="subtotal-price">£0.00</div>

here is my function..

function calculateSubTotal() {
    let subtotal = 0;
    for (i = 1; i <= itemTotal1; i++) {

        itemID = document.getElementById('valueTest1');
        if (typeof itemID === 'undefined' || itemID === null) {
            alert("No such item - " + "valueTest1");
        } else {
            subtotal = subtotal + parseFloat(valueTest1.value) * parseFloat(itemID.getAttribute("data-price"));
        }

    }
    console.log(valueTest1.value)
    document.getElementById('itemTotal1').innerHTML = "£" + subtotal;
}

I can console.log the input (valueTest1.value) outside of the function and it shows 0 but when i try to console.log the input in the function i get nothing, any help would be appreciated.

Answer 1

You got some changes to do on your HTML and JS files. First, you could do something more "generic" to use, so you can reuse it on every input and button.

HTML:

<section id="shopping-cart">
    <div class="shopping-cart">
        <!-- <div class="title">
            Online Store
        </div> -->
        <div class="title">
            <ul>
                <li>Online Store</li>
                <li>Quantity</li>
                <li>Price</li>
                <li>Subtotal</li>
            </ul>
        </div>

        <!-- Product 1 -->
        <div class="item">
            <div class="buttons">
                <span class="delete-btn"></span>
                <span class="like-btn"></span>
            </div>

            <div class="image">
                <img src="/img/shop/cup.webp" alt="#">
            </div>

            <div class="description">
                <span>Cyberpunk 2077</span>
                <span>Coffee Mug</span>
                <span>Multi-color</span>
            </div>

            <div class="quantity">
                <button onclick="Input_ChangeValue(this, '-');" class="minus-btn">
                    <img src="/img/shop/minus-btn.png" alt="#">
                </button> <!-- Check the parameter values! -->
                <input id="valueTest1" type="text" value="0" data-price="10.99" onchange="calculateSubTotal(this);"> <!-- Calculate when the user inputs value -->
                <button onclick="Input_ChangeValue(this, '+');" class="plus-btn">
                    <img src="/img/shop/plus-btn.png" alt="#">
                </button> <!-- Check the parameter values! -->
            </div>

            <div id="itemPrice1" class="total-price">£10.99</div>
            <div id="itemTotal1" class="subtotal-price">£0.00</div>
        </div>
        <!-- Product 2 -->
        <div class="item">
            <div class="buttons">
                <span class="delete-btn"></span>
                <span class="like-btn"></span>
            </div>

            <div class="image">
                <img src="/img/shop/t-shirt.jpg" alt="#">
            </div>

            <div class="description">
                <span>Cyberpunk 2077</span>
                <span>T-Shirt</span>
                <span>Multi-color</span>
            </div>

            <div class="quantity">
                <button onclick="Input_ChangeValue(this, '-');" class="minus-btn">
                    <img src="/img/shop/minus-btn.png" alt="#">
                </button>
                <input id="valueTest2" type="text" value="0" data-price="15.99" onchange="calculateSubTotal(this);">
                <button onclick="Input_ChangeValue(this, '+');" class="plus-btn">
                    <img src="/img/shop/plus-btn.png" alt="#">
                </button>
            </div>

            <div id="itemPrice2" class="total-price">£<span>15.99</span></div>
            <div id="itemTotal2" class="subtotal-price">£<span>0.00</span></div>
        </div>

        <!-- Product 3 -->
        <div class="item">
            <div class="buttons">
                <span class="delete-btn"></span>
                <span class="like-btn"></span>
            </div>

            <div class="image">
                <img src="/img/shop/jacket1.jpg" alt="#">
            </div>

            <div class="description">
                <span>Cyberpunk 2077</span>
                <span>Womens Jacket</span>
                <span>Dark</span>
            </div>

            <div class="quantity">
                <button onclick="Input_ChangeValue(this, '-');" class="minus-btn">
                    <img src="/img/shop/minus-btn.png" alt="#">
                </button>
                <input type="text" id="valueTest3" value="0" data-price="24.99" onchange="calculateSubTotal(this);">
                <button onclick="Input_ChangeValue(this, '+');" class="plus-btn">
                    <img src="/img/shop/plus-btn.png" alt="#">
                </button>
            </div>

            <div id="itemPrice3" class="total-price">£<span>24.99</span></div>
            <div id="itemTotal3" class="subtotal-price">£<span>0.00</span></div>
        </div>
    </div>
</section>

JS:

function Input_ChangeValue(trigger, operation) {
  let inputChange = trigger.parentElement.querySelector("input");

  if (inputChange != null) {
    let actualValue = parseInt(inputChange.value);
    let nextValue = 0;

    switch (operation) {
      case "-":
        nextValue = actualValue - 1;
        break;
      case "+":
        nextValue = actualValue + 1;
        break;
    }

    if (nextValue <= 0) nextValue = 0; //don't allow negative numbers

    inputChange.value = nextValue;

    calculateSubTotal(inputChange);
  }
}

function calculateSubTotal(inputElement) {

  let subTotalDiv = inputElement.parentElement.parentElement.querySelector(".subtotal-price");

  if (inputElement != null && subTotalDiv != null) {
    //input found
    let qty = parseFloat(inputElement.value);
    let price = parseFloat(inputElement.getAttribute("data-price"));
    let subtotal = qty * price;

    //for debugging
    console.log(subtotal);
    subTotalDiv.innerHTML = `£${subtotal}`;
  }
}

Still there are a couple of validations you should check, like inputs accepting only numbers or the Subtotal column only showing the first 2 decimal places.

Good luck!

Answer 2

Your loop is redundant here - you are multiplying a single value from an element with another value from the same element.

I would go with the easier to read and safer:

    <body>
    <script>
        function calculateSubTotal() {
            let subtotal = 0;
            let item = document.getElementById('valueTest1');
            let itemTotal = document.getElementById('itemTotal1');

            if (typeof item === 'undefined' || item === null) {
                alert("No such item - " + " valueTest1");
            }

            let itemCount = parseFloat(item.value);
            if (!isNaN(itemCount)) {
                let itemPrice = parseFloat(item.getAttribute('data-price'));

                if (!isNaN(itemPrice )) {
                    subtotal += itemCount * itemPrice;
                }
            }

            itemTotal1.innerHTML = "£" + subtotal;
        }
    </script>

    <input id="valueTest1" type="text" value="0" data-price="10.99" onblur="javascript:calculateSubTotal()">

    <div id="itemTotal1" class="subtotal-price">£0.00</div>
</body>