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

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

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

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

实现步骤如下：

1. 为

   添加唯一 id
   （原代码中缺失）：

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

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

   

   情感家园企业站5.0 多语言多风格版

   一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！

   下载

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

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