Html Question posted in
Some basic documentation can be found here.

Html – input value returning undefined in javascript

So what’s going on here is this is code for a web app that keeps track of how many times you have lost. The main problem though is in the log function when I get the value it returns undefined.

Whenever I call the username variable it returns 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>

In this code I made many attempts at solving the issue. In one attempt I made a function that defines the variable when that function is called.

Tags:

2

Answers


  1. 0

    The issue lies here:

    globalThis.username = document.getElementById("username").Value;

    Change Value to ALL LOWERCASE value

    Change that for all the places you are getting the value.

    Login or Signup to reply.
  2. 0

    You have to write .value in other place JS:

    const usernameField = document.getElementById("username").value;
const passwordField = document.getElementById("password").value;

    Then you change username and password:

    function getUsernamePassword(){
    globalThis.username = usernameField;
    globalThis.password = passwordField;
    return;
}

    Also you should change the .Value into .value in other places.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search