Hi I'm new to javascript and just wanted to do a basic else if name input validation. I keep running into the same issue. It directly goes to else. Please help.
<!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 would like to output the name and access granted or denied in the paragraph tag with the id of outputName.
You've saved an empty username value from when the user didn't type anything yet
You have to get the value in onclick
let submit = document.getElementById("submitBtn");
let output = document.getElementById("outputName");
submit.onclick = function(){
let username = document.getElementById("textField").value;
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";
}
}
or
let usernameField = document.getElementById("textField")
let submit = document.getElementById("submitBtn");
let output = document.getElementById("outputName");
submit.onclick = function(){
const username = usernameField.value;
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";
}
}