使用JavaScript修改商品重量时出现[object HTMLSpanElement]错误如何解决

问题根因 #

你代码里出现[object HTMLSpanElement]的核心原因有两个：

• 你在plus和minus函数里直接使用了weight变量，但没有提前定义这个变量存储单份商品的重量。浏览器会默认将id为weight的DOM元素挂载到全局window对象上，此时你用到的weight实际上是<span id="weight">这个DOM元素对象，数字和DOM对象做运算时会自动将对象转成字符串[object HTMLSpanElement]，就出现了你看到的异常内容。
• 你的代码最后<script>标签没有正确闭合，应该是</script>。

修复方案 #

1. 先把单份商品的重量从PHP输出到JS变量中，避免直接调用DOM对象做运算
2. 给parseInt补充第二个参数10，指定按十进制解析，避免异常进制转换问题
3. 补充数量下限判断，避免商品数量减为负数
4. 修正script闭合标签

修复后代码示例 #

<!-- 页面展示部分 -->
<span id="weight"><?php echo $value['weight']; ?></span> kg<br/>
<button onclick="minus()"> - </button>
<span id="quantity"> 1 </span>
<button onclick="plus()"> + </button>
<br/>  

<script>
// 定义单份商品的重量
const singleWeight = parseInt(<?php echo $value['weight']; ?>, 10);
// 存储当前商品数量
let currentNum = 1;

function plus(){
    currentNum++;
    // 同步更新数量展示
    document.getElementById('quantity').innerHTML = currentNum;
    // 计算并更新总重量
    document.getElementById('weight').innerHTML = currentNum * singleWeight;
}

function minus(){
    // 限制数量最低为1，可根据业务需求调整下限
    if(currentNum > 1) {
        currentNum--;
        document.getElementById('quantity').innerHTML = currentNum;
        document.getElementById('weight').innerHTML = currentNum * singleWeight;
    }
}
</script>

内容的提问来源于stack exchange，提问作者ashley gibson