本文详解如何修复因元素 id 匹配错误导致的用户名无法存入 localstorage 的问题，并提供完整、健壮的前端实现方案。
本文详解如何修复因元素 id 匹配错误导致的用户名无法存入 localstorage 的问题，并提供完整、健壮的前端实现方案。
在限时测验（Timed Quiz）应用中，将用户最终得分保存至 localStorage 通常已通过游戏逻辑实现，但常被忽略的是——用户名作为关键标识信息，也需同步持久化，以便后续展示排行榜或个性化结果页。你当前遇到的问题核心在于：JavaScript 尝试通过 document.getElementById('submit') 绑定事件，而 HTML 中该按钮的真实 id 是 submitBtn，导致事件监听器未生效，用户名自然无法保存。
首先，修正 DOM 元素获取逻辑。你的 HTML 中提交按钮定义如下：
<button type="submit" class="btn" id="submitBtn">Save</button>
因此，JavaScript 中必须严格匹配该 id：
const submitBtn = document.getElementById('submitBtn'); // ✅ 正确：id="submitBtn"
// const submitBtn = document.getElementById('submit'); ❌ 错误：HTML 中无此 id
其次，表单提交行为需明确阻止默认跳转（你已使用 event.preventDefault()，这点很好），但还需确保输入值非空、并增强健壮性。以下是优化后的 end.js 完整代码：
// 获取 DOM 元素
const usernameInput = document.getElementById('username');
const submitBtn = document.getElementById('submitBtn');
const finalScore = document.getElementById('finalScore');
// 显示最终得分（从 localStorage 读取）
const mostRecentScore = localStorage.getItem('mostRecentScore');
finalScore.innerText = mostRecentScore || '0';
// 绑定保存用户名事件
submitBtn.addEventListener('click', function(event) {
event.preventDefault();
const username = usernameInput.value.trim();
if (!username) {
alert('请输入有效的用户名！');
return;
}
// 保存用户名（覆盖式，如需多用户记录可改用数组+JSON序列化）
localStorage.setItem('username', username);
console.log('✅ 用户名已保存：', username);
// 可选：反馈提示
submitBtn.textContent = '已保存';
setTimeout(() => {
submitBtn.textContent = 'Save';
}, 1500);
});
⚠️ 关键注意事项：
- 不要依赖
<form></form>的原生提交（type="submit"），除非你主动处理submit事件；此处推荐统一用click事件 +preventDefault()，更可控； - 输入校验不可省略：空字符串、空白符、超长内容都应拦截，避免无效数据污染存储；
- 若需支持多个用户成绩（如历史记录），建议将数据结构升级为数组，例如：
const history = JSON.parse(localStorage.getItem('quizHistory') || '[]'); history.push({ username, score: mostRecentScore, timestamp: Date.now() }); localStorage.setItem('quizHistory', JSON.stringify(history));
最后，请确认浏览器控制台无其他报错（如脚本加载失败、跨域限制等），并在开发者工具 → Application → Local Storage 中实时验证 username 是否成功写入。修复 ID 匹配后，用户名即可稳定落库，为后续排行榜、数据导出等功能奠定基础。
