PHP+JS实现商品数量增减价格实时更新点击加号价格归零问题求助

核心错误点 #

• 全局price变量初始化时机错误：页面加载完成后就立刻读取#price的文本内容赋值，此时用户还未点击商品选择按钮，#price为空值，转换为数值后就是0，导致乘法运算结果全为0。
• 单价被覆盖：你直接用展示总价的#price元素存储原始单价，第一次计算后#price就会变成总价，后续计算会用总价乘数量，数值完全错误。
• 数值类型未转换：从DOM读取的文本、输入框值默认都是字符串类型，直接做乘法运算会出现类型异常。
• 输入框属性错误：数量输入框的type属性误写为nnumber，正确值为number。

修复步骤 #

1. 修正HTML结构，新增原始单价存储位 #

<div  class="adjust">
    <!-- 新增隐藏域存储原始单价，避免被总价覆盖 -->
    <input type="hidden" id="unit_price" value="">
    <div class="quantity">
        <button class="btn minus-btn disabled" type="button">-</button>
        <!-- 修正type属性 -->
        <input type="number" id="quantity" value="1">
        <button class="btn plus-btn" type="button">+</button>
    </div>
    <!--will calculate price---->
    <p class="total-price">
        <span><i class="fa fa-ruby"></i></span>
    <span id="price"></span>
    </p>
</div>

2. 修正商品点击事件的逻辑 #

$(document).ready(function() {
    $('.editsbtnr').on('click', function() {
        $('.adjust').show();
        $tr = $(this).closest('tr');
        var data = $tr.children("td").map(function(){
            return $(this).text().trim(); // 去除文本前后空白字符
        }).get();
        console.log(data);
        $('#id').val(data[0]);
        $('#name').val(data[3]);
        $("#quantity").attr("min", 1).attr("max", data[5]).attr('title', 'Must be greater than zero').val(1); // 每次打开重置购买数量为1

        // 给隐藏的单价域赋值数值型的原始单价
        $('#unit_price').val(Number(data[6]));
        // 初始化显示总价，默认数量1时总价等于单价
        document.getElementById("price").innerText = Number(data[6]);
        // 重置减号按钮为禁用状态
        document.querySelector(".minus-btn").setAttribute("disabled", "disabled");
        document.querySelector(".minus-btn").classList.add("disabled");
    });
});

3. 修正数量增减与价格计算逻辑 #

<script>
// 价格计算函数
function priceTotal() {
    // 读取原始单价与当前数量，统一转成数值类型
    var unitPrice = Number(document.getElementById("unit_price").value);
    var quantity = Number(document.getElementById("quantity").value);
    var total = unitPrice * quantity;
    document.getElementById("price").innerText = total.toFixed(2); // 保留两位小数，避免浮点运算精度问题
}
// 加号按钮事件
document.querySelector(".plus-btn").addEventListener("click", function() {
    var quantityInput = document.getElementById("quantity");
    var valueCount = Number(quantityInput.value);
    var maxStock = Number(quantityInput.getAttribute("max"));
    // 新增库存校验，不可超过可售数量
    if(valueCount >= maxStock) return;
    valueCount++;
    quantityInput.value = valueCount;
    if (valueCount > 1) {
        document.querySelector(".minus-btn").removeAttribute("disabled");
        document.querySelector(".minus-btn").classList.remove("disabled")
    }
    priceTotal();
})
// 减号按钮事件
document.querySelector(".minus-btn").addEventListener("click", function() {
    var quantityInput = document.getElementById("quantity");
    var valueCount = Number(quantityInput.value);
    // 新增最小值校验，不可小于1
    if(valueCount <= 1) return;
    valueCount--;
    quantityInput.value = valueCount;
    if (valueCount == 1) {
        document.querySelector(".minus-btn").setAttribute("disabled", "disabled")
        document.querySelector(".minus-btn").classList.add("disabled");
    }
    priceTotal();
})
</script>

内容的提问来源于stack exchange，提问作者Lawrence Luague