JavaScript出现[object HTMLSpanElement]错误，购物车总价无法正常显示如何修复

• 核心错误是变量costoTotal初始赋值时直接取了<span id="valor">的DOM元素对象，而非元素内的文本值。DOM对象和字符串做加法运算时，会自动转为[object HTMLSpanElement]字符串拼接，就出现了你看到的错误输出。
• 次要问题是商品价格存为字符串格式，后续累计时如果不转数字会触发字符串拼接逻辑，而非数值加法。
• 额外注意：你代码中最后赋值用的valor属于浏览器自动挂载的全局DOM变量，不符合代码规范，容易出现兼容性问题。

"use strict";
let btn = document.getElementById("buttonCarrito");
btn.addEventListener("click",agregar);

function agregar(){
    const Productos= {
        "Manzana": "50",
        "Banana": "40",
        "Naranja": "30",
        "Mandarina": "20"        
    }
    console.table(Productos)
    // 取用户输入的商品名
    const frutaComprada = document.getElementById("inputProducto").value.trim();
    // 取总价显示的DOM元素
    const valorDom = document.getElementById("valor");
    // 取当前已有的总价，转成数字
    let costoTotal = Number(valorDom.innerText.trim());
    // 取选中商品的价格，转数字，不存在的商品默认价格为0
    const productoSeleccionado = Number(Productos[frutaComprada] || 0);
    // 数值加法累加
    costoTotal += productoSeleccionado;
    // 赋值回页面显示
    valorDom.innerHTML = costoTotal;
}

HTML代码无需做任何修改，替换JS代码即可正常运行。如果需要优化体验，可以额外添加商品名校验逻辑，当用户输入不存在的商品时弹出提示，避免无反应的情况。

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