JavaScript中input值返回undefined问题求助

核心错误原因 #

你代码里的关键问题是DOM元素的值属性拼写错误：JavaScript中，输入框的内容属性是小写的value，但你全程写成了大写的Value，这会导致无法读取到输入框的真实内容，所以返回undefined。

具体错误位置 #

1. getUsernamePassword函数中：

globalThis.username = document.getElementById("username").Value; // 错误：Value -> value
globalThis.password = document.getElementById("password").Value; // 错误：Value -> value

2. log函数中：

log.innerHTML = `${document.getElementById("username").Value}, ${new Date().toLocaleTimeString({'hour12': false})}` // 错误：Value -> value

修复后的完整JavaScript代码 #

同时优化了变量复用（不用重复调用getElementById），并避免不必要的全局变量挂载：

document.addEventListener('DOMContentLoaded', function () {
    let focusPass = false;
    let focusUsername = false;
    let toggleLogger = true;
    const logButton = document.getElementById("gameLoss"); 
    const usernameField = document.getElementById("username");
    const passwordField = document.getElementById("password");
    const signin = document.getElementById("signin");
    const logger = document.getElementById("logger");
    const gamesLogged = document.getElementById("gamesLogged");
    let username;
    let password;

    passwordField.addEventListener("focus", function () {
        focusPass = true;
    });

    passwordField.addEventListener("focusout", function () {
        focusPass = false;
    });

    usernameField.addEventListener("focus", function () {
        focusUsername = true;
    });

    usernameField.addEventListener("focusout", function () {
        focusUsername = false;
    });

    logButton.addEventListener("click", function (event) {
        event.target.style.background="red";
        log();
    });

    function toggleDisplay() {
        if (toggleLogger) {
            signin.style.display = "none";
            logger.style.display = "block";
            toggleLogger = false;
            return;
        }
        if (!toggleLogger) {
            signin.style.display = "block";
            logger.style.display = "none";
            toggleLogger = true;
            return;
        }
        return;
    }

    function getUsernamePassword(){
        username = usernameField.value; // 修复为小写value，复用已获取的元素变量
        password = passwordField.value; // 修复为小写value，复用已获取的元素变量
        return;
    }   
    
    function log(){
        let logElement = document.createElement("p"); // 变量名避免和函数名log重复
        logElement.innerHTML = `${username}, ${new Date().toLocaleTimeString({'hour12': false})}`
        gamesLogged.appendChild(logElement);
    }
    
    document.addEventListener('keydown', function (event) {
        const name = event.key;
        
        if (focusPass || focusUsername) {
            if (name === 'Enter') {
                getUsernamePassword();
                logButton.innerHTML = username;
                toggleDisplay();
                focusPass = false;
                focusUsername = false;
                return;
            }
        }

        if (name === "Escape"){
            if (!toggleLogger){
                toggleDisplay();
                return;
            }
        }
    });
});

额外优化说明 #

1. 变量名log和函数名log重复，修改为logElement避免冲突
2. 复用之前已经获取的usernameField、passwordField变量，减少DOM查询次数，提升性能
3. 去掉globalThis的不必要使用，直接使用闭包内的username、password变量

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