计时测验应用无法保存用户名至local storage问题求助

直接指出核心问题：

• 按钮元素未正确绑定：HTML里保存按钮的id是submitBtn，但JS代码里用document.getElementById('submit')获取，导致submitBtn变量为null，点击事件根本没绑定到按钮上，保存逻辑无法执行。
• 输入框属性语法错误：用户名输入框的type属性写成了type="text name"，正确写法应为type="text"，错误属性可能导致浏览器无法正确解析输入框，进而获取不到输入值。

修改后的代码 #

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/style.css">
    <title>Congratulations</title>
</head>
<body>
<div class="container">
    <div id="end" class="flex-center flex-column">
        <h1 id="finalScore">0</h1>
        <form>
            <!-- 修正type属性 -->
            <input
                    type="text"
                    name="username"
                    id="username"
                    placeholder="username"/>
            <!-- 移除无效的空onclick属性 -->
            <button
                    type="submit"
                    class="btn"
                    id="submitBtn">
                Save
            </button>
            <a class="btn" href="game.html">Play Again</a>
            <a class="btn" href="start.html">Go Home</a>
        </form>
    </div>
</div>
<script src="assets/end.js"></script>
</body>
</html>

修正后的JavaScript代码 #

// 关联HTML中的用户名输入框
const usernameInput = document.getElementById('username');

// 修正按钮id，改为submitBtn
const submitBtn = document.getElementById('submitBtn');

// 关联最终分数元素
const finalScore = document.getElementById('finalScore');

// 从localStorage获取最近一次得分
const mostRecentScore = localStorage.getItem('mostRecentScore');

// 将得分显示在结束页面
finalScore.innerText = mostRecentScore;

submitBtn.addEventListener('click', function(event)  {
  // 阻止表单默认提交行为
  event.preventDefault();

  // 获取用户名输入值
  const username = document.querySelector("#username").value;
  
  // 将用户名存入localStorage
  localStorage.setItem('username', username);
});

验证方式 #

修改后点击保存按钮，打开浏览器开发者工具（F12），切换到Application（Chrome）或Storage（Firefox）标签，查看Local Storage下是否出现username字段，值为你输入的用户名。

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