JavaScript表单bug：prompt输入触发页面重置致input值丢失

页面自动重置、已输入内容丢失，由两个易被忽略的特性叠加触发：

• HTML规范中，<form>包裹的原生<button>，若不主动声明type属性，默认取值为submit，点击后会触发表单默认提交，引发整页刷新，所有内存中的输入状态会全部清空。
• 原代码的eta_controllo函数将全局变量eta_btn设为同名形参，函数执行时的赋值操作只修改了局部作用域的变量，从未给全局存储的二次校验年龄值赋值，即使没有页面刷新，后续的年龄比对逻辑也永远拿不到prompt输入的数值。

1. 给表单内所有按钮指定明确的type属性 #

从根源上避免默认提交行为触发，不同按钮匹配对应功能：

• 触发prompt年龄校验的「CONTROLLO」按钮：设置type="button"，仅绑定JS逻辑，不触发表单提交
• 「ANNULLA TUTTO」按钮：设置type="reset"，匹配清空表单的初始预期
• 「INVIA AL SERVER」按钮：设置type="button"，绑定自定义提交校验逻辑，不触发表单默认刷新

对应修正后的按钮代码示例：

<!-- 触发prompt的按钮：去掉默认submit行为 -->
<button type="button" onclick="eta_controllo()">CONTROLLO</button>
...
<!-- 重置按钮明确类型 -->
<button type="reset">ANNULLA TUTTO</button>
<!-- 提交校验按钮不触发默认刷新 -->
<button type="button" onclick="send_to_server()">INVIA AL SERVER</button>

2. 修正全局变量赋值的作用域问题 #

去掉eta_controllo函数里的同名形参，让prompt输入的值正确赋值到全局变量，供后续年龄比对逻辑读取：

// 修正前：形参和全局变量同名，导致赋值给了局部变量
// function eta_controllo(eta_btn) {
//  eta_btn = Number(prompt("Inserisci la tua età"));
// }

// 修正后：无冗余形参，直接给全局eta_btn赋值
function eta_controllo() {
  eta_btn = Number(prompt("Inserisci la tua età"));
  console.log(eta_btn);
}

3. 兜底拦截默认行为 #

如果不想逐个给按钮加type，可以在事件处理函数里主动拦截表单默认提交动作，哪怕按钮没设type也能避免页面刷新：

function eta_controllo(e) {
  // 拦截当前按钮的默认提交行为
  e.preventDefault();
  eta_btn = Number(prompt("Inserisci la tua età"));
  console.log(eta_btn);
}

对应绑定事件的地方要把event对象传进去：

<button onclick="eta_controllo(event)">CONTROLLO</button>

点击CONTROLLO按钮触发prompt弹窗时，不会再触发整页刷新，<input>里已经输入的年龄、姓名、选择的城市、职业选项都会完整保留，prompt输入的值会正确存到全局变量里，和input输入的年龄完成比对。

内容的提问来源于stack exchange，提问作者Beaver