本文详解在表单中通过 javascript 或原生 html 方式一键清空多个 input 输入值的实用方法，包括 `form.reset()` 的正确用法、常见错误排查及完整可运行示例。
在 Web 表单开发中，为用户提供“重置”功能是提升交互体验的重要一环。初学者常误以为需手动遍历并清空每个 <input> 元素的 value，不仅代码冗长，还易因 DOM 引用错误（如变量作用域、未定义元素）导致失败——正如提问者遇到的 x.value = "" 报错问题：x 是局部变量，无法在 emptyInput() 中直接访问。
✅ 推荐方案：使用原生 form.reset() 方法
该方法会将表单内所有控件（<input>、<select>、<textarea> 等）恢复为初始状态（即页面加载时的 value 值）。若所有输入框初始为空，则等效于“清空”。
实现步骤如下：
-
为 <form> 添加唯一 id（原代码中缺失）：
<form class="form-inline" id="calcForm">
-
绑定重置按钮事件，调用 reset()：
立即学习“Java免费学习笔记（深入）”；
document.getElementById("btnRefresh3").addEventListener("click", function(e) { e.preventDefault(); // 阻止默认提交行为（非必需，但更安全） document.getElementById("calcForm").reset(); }); -
可选：同步清空表单外的独立输入框（如 #inputKVA）
因其不在 <form> 内，reset() 不会覆盖它，需单独处理：document.getElementById("btnRefresh3").addEventListener("click", function(e) { e.preventDefault(); document.getElementById("calcForm").reset(); document.getElementById("inputKVA").value = ""; // 手动清空独立输入框 document.getElementById("outputLoading").textContent = ""; document.getElementById("flA").textContent = ""; });
⚠️ 注意事项与避坑指南：
- ❌ 不要依赖函数内局部变量（如 x, y）清空 DOM —— 它们只是数值副本，不指向输入框元素；
- ✅ 优先使用 form.reset()，语义清晰、兼容性好（支持所有现代浏览器）；
- ? 若需“重置为自定义值”（非初始空值），则必须手动设置 element.value，此时建议用 querySelectorAll 统一操作：
document.querySelectorAll("#calcForm input, #inputKVA").forEach(el => el.value = ""); - ? 原代码中存在重复事件监听（btnStart3 被绑定了 doCalc 和 calculate），且 capacity 等变量作用域混乱，建议重构为模块化逻辑，避免全局污染。
最终精简版重置函数（推荐直接使用）：
document.getElementById("btnRefresh3").addEventListener("click", function(e) {
e.preventDefault();
document.getElementById("calcForm").reset();
document.getElementById("inputKVA").value = "";
document.getElementById("outputLoading").textContent = "";
document.getElementById("flA").textContent = "";
});这样即可彻底解决多输入框一键清空问题，代码简洁、健壮且易于维护。
