点击计算器运算符报[object HTMLDivElement]错误且文本消失如何解决

DevOps 小满

2026-10-4

问题根因

你的operation函数赋值逻辑写反了，且错误地将DOM对象直接赋值给innerHTML属性：你现在的代码是把prev这个DOM元素直接赋值给current的innerHTML，系统会自动把DOM对象转成字符串，就会出现你看到的[object HTMLDivElement]错误
需求是把当前输入的数值复制到prev容器，应该是把current的内容赋值给prev的innerHTML，而不是反过来

优化后代码

JS代码修改

提前缓存DOM元素避免每次点击都重复查询DOM，同时修正赋值逻辑、补充运算符拼接能力：

// 全局缓存两个展示容器的DOM对象，避免重复查询
const currentEl = document.getElementById("current")
const prevEl = document.getElementById("prev")

function calculate(button) {
    const number = button.innerHTML
    currentEl.innerHTML += number
}

function operation(button) {
    // 将当前输入的数值和选中的运算符一起存入prev容器
    prevEl.innerHTML = currentEl.innerHTML + button.innerHTML
    // 清空当前输入区域，准备接收下一个数值
    currentEl.innerHTML = ''
}

HTML代码修改

给所有运算符按钮的点击事件传入当前按钮对象，和数字按钮的传参逻辑保持一致：

<button onClick="operation(this)">÷</button>
<button onClick="operation(this)">*</button>
<button onClick="operation(this)">+</button>
<button onClick="operation(this)">-</button>

额外优化建议