计算器Backspace键仅临时删除内容,输入新值旧值恢复的问题排查
问题分析与解决方案
你的问题核心在于Backspace按键仅修改了屏幕显示,未同步更新存储当前数值的currentValue变量。当你按下Backspace时,屏幕上的文本被截断,但currentValue仍然保留着完整的原始数值,所以输入新数字时,会在旧的完整值基础上追加,导致被删除的内容重新出现。
修复代码
修改window.onkeydown函数中Backspace分支的逻辑,同步更新currentValue和屏幕显示:
case "Backspace": // 先更新存储的当前值,再同步到屏幕 currentValue = currentValue.slice(0, -1); currentScreen.textContent = currentValue; break;
为什么这样有效?
之前的代码只修改了DOM元素的文本内容,但计算器的核心数据(currentValue)没有变化。现在的逻辑直接修改currentValue,再将更新后的值同步到屏幕,确保数据模型和视图完全一致。后续输入新数字时,会基于更新后的currentValue追加,不会再出现旧内容复原的问题。
内容的提问来源于stack exchange,提问作者Jose Velasco
相关产品推荐
相关产品推荐

