本文介绍如何通过 HTML 表单的 onreset 事件配合 JavaScript，实现点击“Reset”按钮时不仅清空所有 字段，还同步清除独立于表单结构的 中的计算结果或提示文本。

本文介绍如何通过 html 表单的 `onreset` 事件配合 javascript，实现点击“reset”按钮时不仅清空所有 `` 字段，还同步清除独立于表单结构的 `

` 中的计算结果或提示文本。

默认情况下，HTML 的 按钮仅重置表单内原生可重置的控件（如 、、），而不会影响 <div>、<span> 等非表单元素——这正是你遇到的问题：#verdict 区域未被清空。<p>解决方法是利用表单的 onreset 事件，在浏览器执行默认重置逻辑后，<strong>主动干预并补充清理自定义内容</strong>。你只需两步：</p> <ol> <li> <p><strong>为 <form> 添加 onreset 属性，绑定自定义重置函数</form></strong> </p> <pre class="brush:php;toolbar:false;"></pre> <form name="myform" onreset="resetForm()"></form> </li> <li> <p><strong>编写 resetForm() 函数，分别清空输入框与结果容器</strong> </p> <pre class="brush:php;toolbar:false;">function resetForm() { // 清空所有相关输入字段（推荐使用 name 属性精准定位） document.myform.b.value = ''; document.myform.c.value = ''; document.myform.d.value = ''; document.myform.e.value = ''; // 清空 verdict 区域内容（支持纯文本、HTML 或动态生成的结果） document.getElementById('verdict').innerHTML = ''; }</pre> </li> </ol> <p>✅ <strong>增强建议（推荐实践）</strong>： </p> <ul> <li>使用 querySelectorAll 提升可维护性（尤其当字段增多时）：<pre class="brush:php;toolbar:false;">function resetForm() { // 批量清空所有数值型输入 ['b', 'c', 'd', 'e'].forEach(name => { const el = document.myform[name]; if (el) el.value = ''; }); // 清空结果区域 document.getElementById('verdict').textContent = ''; // 用 textContent 更安全（防 XSS） }</pre> </li> <li>若 #verdict 中包含复杂结构（如带样式的段落、列表），可预先保存默认占位内容，重置时恢复：<pre class="brush:php;toolbar:false;">const defaultVerdict = '<br>Enter values and click "Calculate" to see result.'; document.getElementById('verdict').innerHTML = defaultVerdict;</pre> </li> </ul> <p>⚠️ <strong>注意事项</strong>： </p> <ul> <li>onreset 在用户点击重置按钮或调用 form.reset() 时触发，但<strong>不会阻止默认重置行为</strong>，因此无需 event.preventDefault()； </li> <li>确保 JavaScript 在 DOM 加载完成后执行（将脚本置于 </li> </ul></span> </div>