这是一个网络应用程序的代码，它可以记录你丢失了多少次，但主要的问题是log函数，当我得到值时，它返回undefined。
当我调用username变量时，它返回undefined。

document.addEventListener('DOMContentLoaded', function () {
    let focusPass = false;
    let focusUsername = false;
    let toggleLogger = true; // all good here
    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");
    var username;
    var 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(){
        globalThis.username = document.getElementById("username").Value;
        globalThis.password = document.getElementById("password").Value;
        return;
    }   
    
    function log(){
        
        let log = document.createElement("p");
        log.innerHTML = `${document.getElementById("username").Value}, ${new Date().toLocaleTimeString({'hour12': false})}`
        gamesLogged.appendChild(log);
    }
    
    document.addEventListener('keydown', function (event) {

        var 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;
            }
        }

    });

});

.body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 3;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif; 
    background-color: aliceblue;
}

.signin {
    text-align: center;
    background-color: rgb(29, 112, 163);
    border-radius: 5px;
}

input {
    display: block;
    margin: 5px;
    padding: 5px;
    width: 3in;
    outline:none;
    border-radius: 5px;
    font-size:15px;
    background-color: aliceblue;
}

input:focus {
    background-color: lightblue;
}

.logger {
    border: brown solid 4px;
    border-radius: 40px;
    display:none;
    width: 40%;
    max-height: 50%;

}

.gamesLogged {
    border: black solid 4px;
    
    margin: 0px 15px 15px 15px;
    max-height: 80%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.test{
    text-align: center;
}

.gameLoss{
    margin-top: 10px;
    margin-bottom: 10px;
}

.escapemessage{
    text-align: center;
}

hr {
    width:85%;
    margin-top: 5px;
}

<div class="body">
<h1 style="margin-bottom: 5px;font-size: 60px;">
  <b>The Game</b>
</h1>
    <forum class="signin" id ="signin">
        
        <input class="username" id="username" type="text" placeholder="Username">
        <input class="password" id="password" type="password" placeholder="Password">
    </forum>
    <div class="logger" id="logger">
        <center><button class="gameLoss" id="gameLoss">Log Game Loss</button></center>
        <div id="gamesLogged" class="gamesLogged">
            <center><h1 id="test">Games Lost</h1></center>
            <hr>
        </div>  
        <p class="escapemessage">Press ESC to go back</p>
    </div>
</div>

在这段代码中，我做了很多尝试来解决这个问题。在一次尝试中，我做了一个函数，当函数被调用时，它定义了变量。