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.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Game Logger</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<script src=".js"></script>
<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>
</body>
</html>
JavaScript
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;
}
}
});
});
CSS:
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;
}
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.