JS石头剪刀布项目表单提交后用户名取值undefined问题求解

核心问题原因 #

• 调用$userForm.submit()会触发表单默认提交行为，直接刷新整个页面，页面的JS运行上下文会被完全重置，之前存储的所有变量值都会丢失，这是提交后值变成undefined的核心原因
• 你用来存用户名的$newUserName没有做变量声明，属于隐式全局变量，页面刷新后会直接被销毁
• 获胜者展示逻辑直接读取输入框的实时value值，一旦输入框内容被清空，这里读到的自然是空值
• 没有阻止表单默认提交行为，你之前写的手动清空输入框逻辑根本没有执行机会，页面就已经完成重载了

修复方案 #

• 表单submit事件回调第一行调用event.preventDefault()，阻止默认的页面刷新行为
• 单独声明一个全局变量持久化存储用户提交的用户名，不要直接依赖输入框的实时value
• 提交校验通过后，手动将输入框value设置为空字符串即可实现清空效果，不需要调用原生form.submit()方法
• 获胜者渲染逻辑读取提前存好的用户名变量，不要直接读取输入框value，同时加个兜底值避免空值显示异常

关键代码修改 #

1. 新增全局用户名存储变量 #

在全局DOM变量声明区域新增：

let savedUserName = "玩家"; // 加默认兜底值，避免空值异常

2. 重写表单提交监听逻辑 #

$userForm.addEventListener('submit', (event) => {
    // 阻止表单默认提交刷新页面的行为
    event.preventDefault();
    // 校验输入不为空才存储
    const inputVal = $userName.value.trim();
    if (inputVal) {
        savedUserName = inputVal;
    }
    // 手动清空输入框
    $userName.value = "";
})

3. 修改获胜者渲染逻辑 #

把原来theWinner函数里读取$userName.value的部分改成读取存储好的变量：

function theWinner() {
    if (userScore === 5) {
        $theWinnerIs.innerHTML = savedUserName;
    } else if (computerScore === 5) {
        $theWinnerIs.innerHTML = "电脑";
    }
}

修改完成后提交表单不会触发页面刷新，用户名会被持久存在变量中，输入框也能正常清空，游戏结束时会正确显示用户提交的用户名，不会出现undefined的显示异常。

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