Hey there, I'm a beginner in javascript and I am struggling with a simple input validation using else if statements. Every time I run the code, it goes directly to the else condition. Can someone please assist me?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Project</title>
</head>
<body>
<label id =myLabel>Enter your friends name:</label><br>
<input id="textField" type="text" placeholder="Enter name"><br>
<button id="submitBtn" type="button">Submit</button><br>
<p id="outputName"></p>
<script src="index.js"></script>
</body>
</html>
let username = document.getElementById("textField").value;
let submit = document.getElementById("submitBtn");
let output = document.getElementById("outputName");
submit.onclick = function(){
if(username === "Rodney" || username === "rodney"){
output.innerHTML = username + " access denied";
}
else if(username === "Alexander" || username === "alexander"){
output.innerHTML = username + " access granted";
}
else{
output.innerHTML = username + " not defined";
}
}
I am looking to display the name along with whether access is granted or denied in the paragraph tag with the ID of outputName.