用form做计算器需阻止默认提交行为，推荐onsubmit="return false"或event.preventDefault()；输入转数字统一用parseFloat()并配合trim()和isNaN()校验；JS应置于/body前或用DOMContentLoaded确保DOM就绪；显示结果优先用textContent防XSS。
怎么用 form 标签做计算器而不跳转页面
默认点击 submit 按钮会刷新页面，必须阻止表单默认行为。关键不是“写计算逻辑”，而是先让页面不重载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给
<form>绑定onsubmit="return false"最快见效；更规范的做法是用event.preventDefault()在 JS 中拦截 - 别用
<input type="submit">却不配<form>——语义错乱，后续加验证或键盘回车支持会出问题 - 如果用
button元素，记得设type="button"，否则某些浏览器默认为submit
parseFloat() 和 parseInt() 选哪个？为什么常出 NaN
用户输入 “12.5” 或 “-7” 是字符串，直接加减会拼接（如 "2" + "3" → "23"），必须转数字；但一转就容易得 NaN。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
parseFloat()：它能处理小数、负数、开头空格（如" -4.2 "），而parseInt("12.3")只返回12，丢精度 - 务必检查转换结果：
isNaN(result)为true就说明输入无效，不能直接参与运算 - 空输入、纯空格、字母混入都会导致
NaN，可提前用.trim()清理再转
运算逻辑写在 onclick 还是 onsubmit？DOM 获取时机很重要
JS 执行时若 DOM 还没加载完，document.getElementById() 会返回 null，后续调用 .value 直接报错 Cannot read property 'value' of null。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把 JS 代码块放在
</body>前，或用DOMContentLoaded包裹，别依赖window.onload（太晚） - 获取输入框推荐用
document.querySelector('input[name="num1"]')，比靠 ID 更贴近表单结构，也方便后续加多个同类字段 - 运算函数里不要重复查 DOM —— 查一次存变量，比如
const a = parseFloat(input1.value)，别写两遍parseFloat(document.getElementById(...).value)
显示结果该用 innerHTML 还是 textContent？安全与可维护性
结果要塞进一个 <div id="result"></div>，看起来都能用，但差别在 XSS 风险和调试成本。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远优先用
textContent：它只当纯文本，哪怕用户输入"<script>alert(1)</script>"也不会执行 - 只有明确需要渲染 HTML（比如加红色错误提示
<span style="color:red">Error</span>）才用innerHTML，且必须对内容做过滤或转义 - 别把结果直接写死进 HTML 标签里（如
<div>= <span id="result"></span></div>），留空最稳妥，JS 控制全量输出
result 显示 NaN 或 0，看起来像算错了。 
