HTML 页面意外刷新的根源与解决方案

HTML 表单提交时默认会触发表单提交行为，导致页面整页重载；若未显式阻止该默认行为，即使仅调用 JavaScript 函数（如 checkAnswer()），页面仍会刷新。

HTML 表单提交时默认会触发表单提交行为，导致页面整页重载；若未显式阻止该默认行为，即使仅调用 JavaScript 函数（如 checkAnswer()），页面仍会刷新。

在开发交互式网页（如你正在制作的三角函数练习小游戏）时，页面无故刷新是一个高频但易被忽视的问题。根本原因在于：HTML <form> 元素在用户触发提交（例如按回车键或点击提交按钮）时，会自动执行标准表单提交流程——向当前 URL 发送 GET 请求（或 POST，取决于 method 属性），从而强制浏览器重新加载页面。

你的代码中虽未显式写出 <form> 的 action 或 method，但只要存在 <form> 标签且内部包含可提交控件（如 <input type="text">），浏览器就将其视为可提交表单。而你在 checkAnswer() 中并未绑定到任何防刷新机制，因此每次用户输入后按 Enter 键，表单即提交 → 页面刷新 → 所有 JS 状态（如 currentStreak、startTime、currentAnswer）全部重置。

正确解法是 阻止表单的默认提交行为，仅执行自定义逻辑：

<form onsubmit="event.preventDefault(); checkAnswer();"><inputtype="text"id="answer"placeholder="Your answer"autocomplete="off"autofocus/></form>

? 补充说明：event.preventDefault() 必须在事件处理函数中调用，且需确保 event 对象可用。使用内联 onsubmit 时，浏览器自动注入 event 参数；更推荐的现代写法是分离 HTML 与 JS：

// 在 script 标签或外部 JS 文件中document.querySelector('form').addEventListener('submit', function (e) {e.preventDefault(); // 关键：阻止默认提交checkAnswer();});

注意事项：

1. 不要遗漏 event.preventDefault() —— 即使 checkAnswer() 逻辑正确，缺少它仍会导致刷新；
2. 避免在 checkAnswer() 内部调用 location.reload() 或隐式触发表单提交（如误将 <button> 写成 <button type="submit">）；
3. 若使用 <button> 提交，请明确设置 type="button"（而非默认的 "submit"），否则也会触发表单提交；
4. 调试技巧：在 checkAnswer() 开头添加 console.log('checkAnswer called');，若页面刷新前未见该日志，即可确认是表单默认行为导致，而非 JS 报错。

通过这一改动，你的三角函数练习游戏将稳定运行，计时、连击、分数等状态得以持续维护，用户体验显著提升。记住：所有基于表单交互的前端应用，都应主动控制提交行为——这是 Web 开发的基石实践之一。