纯HTML无法实现在线计算器，因其不能处理字符串转数字、事件响应、运算符优先级解析及状态管理；必须用JavaScript实现append()、calculate()、clearAll()等逻辑并更新DOM。
纯 HTML 无法实现在线计算器的计算逻辑，必须配合 JavaScript——因为 input 的 value 是字符串，+ 会拼接而非相加；HTML 没有事件响应、状态维护或表达式解析能力。
为什么不能只写 HTML 就算出结果
常见误解是用 <form> 包裹两个 <input type="number"> 再加一个提交按钮，以为能“自动算”。实际问题很直接：
-
"2" + "3"得到的是"23"，不是5；必须用parseFloat()或Number()转类型 - 点击按钮没反应：HTML 本身不支持
onclick，那是 JS 绑定的行为 - 无法连续操作：比如输入
2+3*4后按=，纯 HTML 没法解析运算符优先级 - 清空、退格、小数点防重复、除零错误提示……全靠 JS 控制流程和 DOM 更新
最小可运行结构里必须有的三样东西
删掉所有花哨样式和功能，一个能按、能输、能出结果的计算器，核心就这三块：
- 显示区：
<div id="display">0</div>或<input id="result" readonly>（推荐input，语义更准、键盘兼容更好） - 按钮网格：每个
<button>带onclick调用 JS 函数，如<button onclick="append('5')">5</button> - JS 逻辑：至少实现
append()（追加字符）、calculate()（用eval()或手写解析器）、clearAll()（重置状态）
注意：eval() 在简单场景下可用，但生产环境要避免——它执行任意代码，有安全风险；初学可先用，后续再替换成分词 + 栈计算逻辑。
立即学习“前端免费学习笔记（深入）”；
最容易踩的坑：字符串拼接 vs 数学运算
几乎所有新手第一处报错都出在这里：
- 写成
current = current + val，而current初始是字符串"0"，点1变成"01"，再点+就是"01+"，根本没法算 - 没处理小数点重复：
"2.3."是非法表达式，但 JS 不会自动拦截，得在append('.')里判断当前值是否已含. - 除零没拦截：
eval("5/0")返回Infinity，不是报错；需要if (operator === '/' && b === 0)提前判断 - 连续等号行为没定义：比如
2+3=5=是继续算5+3？还是忽略？这个逻辑必须手动写清楚，HTML 不帮你决定
别跳过 DOM 更新时机
很多调试失败是因为 JS 改了变量，但忘了更新页面显示。例如：
写了 current = '2+3'，但没写 document.getElementById('display').textContent = current，界面上还是旧值。更隐蔽的是异步场景：如果用了 setTimeout 或键盘事件监听，display 更新必须在对应函数体内显式调用，不能假设“改了变量就等于刷新了 UI”。
真实项目中，表达式状态、当前输入、历史记录往往拆成多个变量（如 expression、lastResult、waitingForNextNumber），靠单一 current 字符串很难支撑退格、括号嵌套、科学计算等需求——复杂度一上来，光靠 HTML 结构撑不住，JS 的状态管理才是关键。
