为什么当 console.log 给出正确结果时代码不起作用？

如何解决为什么当 console.log 给出正确结果时代码不起作用？

我正在尝试创建一个简单的购物车。但由于错误，我无法前进。我已经计算了价格，现在希望将其设置为元素的 innerText。但是当 console.log 给出正确的结果时它不起作用。

我添加了两个用于增加或减少计数的按钮。我想通过将初始价格乘以计数来设置价格。但是当 console.log 给出预期结果时它不起作用。

我正在学习 JavaScript。所以，如果这是一个愚蠢的错误，请提前道歉。也提前谢谢你！

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,59)
handleCounter(phoneDecrease,-1,1219)
handleCounter(caseDecrease,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>

为什么当 console.log 给出正确结果时代码不起作用？

如何解决为什么当 console.log 给出正确结果时代码不起作用？

相关推荐