0

I am trying to create a simple shopping cart. But I can't progress due to an error. I have calculated the price and now want it to set as the innerText of an element. But it's not working while the console.log is giving the right result.

I have added two buttons that increase or decrease the count. And I want to set the price by multiplying the initial price with the count. But it's not working while console.log is giving the expected result.

I am learning JavaScript. So, sorry in advance if it's a silly mistake. Thank you also in advance!

checkout.addEventListener("click", function() {
    location.reload()
})

function handleCounter(object, counter, amount, n, price) {
    object.addEventListener("click", function() {
        let count = parseInt(counter.value)
        count = count + n
        counter.value = count
        let calcPrice = count * price
        amount = calcPrice
        console.log(amount)
    })
}

handleCounter(phoneIncrease, phoneCounter, phonePrice.innerText, 1, 1219)
handleCounter(caseIncrease, caseCounter, casePrice.innerText, 1, 59)
handleCounter(phoneDecrease, phoneCounter, phonePrice.innerText, -1, 1219)
handleCounter(caseDecrease, caseCounter, casePrice.innerText, -1, 59)
body {
    padding: 50px 0;
}

#shop {
    background-color: rgb(245, 245, 245);
}

.item-image {
    width: 120px;
}

.item {
    display: flex;
    align-items: center;
    margin: 100px 0;
    padding: 25px;
    background-color: white;
    border-radius: 25px;
}

.buy {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.buy h4 {
    margin: 0 25px;
}

h3 {
    margin-left: 25px;
}

input {
    width: 50px;
}

.remove {
    cursor: pointer;
}

.checkout {
    display: flex;
    justify-content: center;
}

section {
    padding: 25px;
}

#checkout {
    text-align: center;
    Color: white;
    background-color: red;
    padding: 10px 25px;
    cursor: pointer;
}
<!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>Shopping Cart</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="shop">
        <main>
            <div class="item">
                <img class="item-image" src="images/product-1.png" alt="iPhone 11">
                <h3>iPhone 11 128GB Black</h3>
                <div class="buy">
                    <button id="phoneDecrease">-</button>
                    <input value="0" type="text" id="phoneCounter">
                    <button id="phoneIncrease">+</button>
                    <h4>$<span id="phonePrice">0</span></h4>
                    <img class="remove" src="images/remove.png" alt="remove-item">
                </div>
            </div>
            <div class="item">
                <img class="item-image" src="images/product-2.png" alt="iPhone 11 Casing">
                <h3>iPhone 11 Silicone Case - Black</h3>
                <div class="buy">
                    <button id="caseDecrease">-</button>
                    <input value="0" type="text" id="caseCounter">
                    <button id="caseIncrease">+</button>
                    <h4>$<span id="casePrice">0</span></h4>
                    <img class="remove" src="images/remove.png" alt="remove-item">
                </div>
            </div>
        </main>
    </div>
    <section>
        <div>
            <h4>Subtotal: <span id="subtotal">$0</span></h4>
        </div>
        <div>
            <h4>Tax: <span id="tax">$0</span></h4>
        </div>
        <div>
            <h4>Total: <span id="total">$0</span></h4>
        </div>
        <div class="checkout">
            <button id="checkout">
            <h2>Check out</h2>
        </button>
        </div>
    </section>
    <script src="script.js"></script>
</body>

</html>
  • @RandyCasburn that is not my / SO's problem. The duplicate answers the question and explains it in a lot of detail. If OP does not understand that its their problem. Questions like this come up 10s of times per day, there is no point in crafting individual answers to those, that is why the canonical duplicate exists. – luk2302 Feb 17 '21 at 17:20
  • @RandyCasburn thank you. I would however point out that the problem is unrelated to the DOM interaction, passing any string in as `amount` and then overwriting that `amount` in the method will cause the outside argument not to change. – luk2302 Feb 17 '21 at 17:31
  • Do you mean I have to create a variable like document,getElementById, and then set the innerText of it? But I did it now and had done it before. But it doesn't work. –  Feb 17 '21 at 17:35
  • that is right, you need to store the result of e.g. `getElementById`, pass that one around, and update some properties on that object. – luk2302 Feb 17 '21 at 17:36
  • 1
    I think I have got it. I have passed *amount* as a parameter and I am trying to overwrite it. As the console.log is inside the function it is working. But it's not changing the value outside. –  Feb 17 '21 at 17:53

0 Answers0