如何使用 JavaScript 清空多个用户输入框

本文详解在表单中通过 javascript 或原生 html 方式一键清空多个 input 输入值的实用方法，包括 `form.reset()` 的正确用法、常见错误排查及完整可运行示例。

在 Web 表单开发中，为用户提供“重置”功能是提升交互体验的重要一环。初学者常误以为需手动遍历并清空每个 元素的 value，不仅代码冗长，还易因 dom 引用错误（如变量作用域、未定义元素）导致失败——正如提问者遇到的 x.value = “” 报错问题：x 是局部变量，无法在 emptyInput() 中直接访问。

✅ 推荐方案：使用原生 form.reset() 方法
该方法会将表单内所有控件（、、 等）恢复为初始状态（即页面加载时的 value 值）。若所有输入框初始为空，则等效于“清空”。

实现步骤如下：

1. 为

   添加唯一 id

   （原代码中缺失）：

2. 绑定重置按钮事件，调用 reset()：

   立即学习“Java免费学习笔记（深入）”；

   document.getElementById("btnRefresh3").addEventListener("click", function(e) {   e.preventDefault(); // 阻止默认提交行为（非必需，但更安全）   document.getElementById("calcForm").reset(); });

3. 可选：同步清空表单外的独立输入框（如 #inputKVA）
   因其不在

   内，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 = ""; });

这样即可彻底解决多输入框一键清空问题，代码简洁、健壮且易于维护。