JavaScript计算器小数点与运算符无法在屏幕显示问题求助

核心问题原因 #

• 小数点无法即时显示：输入小数点后，你直接用parseFloat()转换拼接后的字符串，parseFloat('2.')会自动剔除末尾小数点转为数字2，因此页面不会展示单独的小数点，只有后续输入数字形成合法浮点数后才会显示。
• 运算符无法显示：你给历史区变量prev赋值时仅存储了前序数字，没有拼接运算符，自然不会在页面展示运算符。

修复后完整JS代码 #

// 补充变量声明，避免隐式全局变量
let current = ''
let prev = ''
let lastop = ''
let tempcurrent = ''

function calculate(button) {
    let key = button.textContent
    if(key == 'AC'){
        current = ''
        prev = ''
        lastop = ''
        tempcurrent = ''
    }
    if (key == 'DEL'){
        // DEL同时修改tempcurrent保证状态同步
        tempcurrent = tempcurrent.toString().slice(0, -1)
        current = tempcurrent
    }
    if ( key >= 0 || key == '.'){
        // 新增逻辑：避免重复输入多个小数点
        if(key === '.' && tempcurrent.includes('.')) return
        tempcurrent = tempcurrent + key
        // 不直接转parseFloat，保留字符串格式的小数点
        current = tempcurrent
    }
    if ( key == '+' || key == '-' || key == '÷' || key == '*' ) {
        lastop = key
        // 拼接运算符到prev，同步展示到历史区
        prev = tempcurrent + ' ' + key
        current = ''
        tempcurrent = ''
    } 
    if ( key == '=' && lastop) {
        const prevNum = parseFloat(prev)
        const currentNum = parseFloat(current)
        let res
        switch(lastop) {
            case '+': res = prevNum + currentNum; break
            case '-': res = prevNum - currentNum; break
            case '*': res = prevNum * currentNum; break
            case '÷': res = prevNum / currentNum; break
        }
        current = res.toString()
        // 计算完成后同步tempcurrent状态
        tempcurrent = current
        prev = ''
        lastop = ''
    }
    document.getElementById("current").innerHTML = current
    document.getElementById("prev").innerHTML = prev
    console.log(key)
}

额外优化点 #

• 新增了重复小数点输入拦截逻辑，避免出现1.2.3这类非法格式
• 把多个等于号判断合并为switch分支，代码更简洁易维护
• 修复了变量未声明导致的隐式全局变量问题
• 同步了DEL、等于号操作后的状态，避免后续输入出现逻辑异常

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