本文讲解如何修复因 dom 元素 id 匹配错误导致的用户名无法保存问题，通过修正 javascript 中按钮元素获取逻辑，实现将用户输入的用户名持久化存储到浏览器 localstorage。
本文讲解如何修复因 dom 元素 id 匹配错误导致的用户名无法保存问题，通过修正 javascript 中按钮元素获取逻辑，实现将用户输入的用户名持久化存储到浏览器 localstorage。
在开发带计时功能的在线测验应用时，常需在结束页（end.html）收集并持久化用户信息——如用户名和最终得分。你已成功将分数存入 localStorage（通过 'mostRecentScore' 键），但用户名始终未被保存，根本原因在于 JavaScript 未能正确绑定提交按钮的事件监听器。
回顾你的 HTML 片段：
<button type="submit" class="btn" id="submitBtn"> onclick> Save </button>
而原始 JS 代码中却使用了：
const submitBtn = document.getElementById('submit'); // ❌ 错误：不存在 id="submit" 的元素
这导致 submitBtn 为 null，后续调用 submitBtn.addEventListener(...) 会抛出 TypeError: Cannot read property 'addEventListener' of null，整个事件监听逻辑失效，用户名自然无法保存。
✅ 正确做法是严格匹配 HTML 中定义的 id 属性值：
// ✅ 修正后的 end.js
const usernameInput = document.getElementById('username');
const submitBtn = document.getElementById('submitBtn'); // ✔️ 使用正确的 id
const finalScore = document.getElementById('finalScore');
// 加载并显示上一轮得分
const mostRecentScore = localStorage.getItem('mostRecentScore');
finalScore.innerText = mostRecentScore || '0';
// 绑定表单提交事件（推荐用 form submit 而非 button click，更健壮）
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止页面刷新或跳转
const username = usernameInput.value.trim();
if (username) {
localStorage.setItem('username', username);
console.log('✅ Username saved:', username);
} else {
alert('Please enter a valid username.');
}
});
⚠️ 额外优化建议：
- 使用
<form></form>的submit事件替代按钮click，可兼容回车提交，提升用户体验； - 对
username做.trim()处理，避免空格导致无效存储； - 添加基础校验（如非空判断），防止空字符串写入 localStorage；
- 若需支持多用户/历史记录，可考虑用数组形式存储（如
JSON.stringify([...])），而非单值覆盖。
至此，用户在 end.html 输入用户名并点击“Save”后，即可通过 localStorage.getItem('username') 在其他页面（如成绩排行榜或用户主页）中安全读取，完成完整的数据闭环。
