I am trying to get the push notices visible upon pressing the button, depending on your age either of the “You are of legal age” or “You are not of legal age” messages should be written out depending on the age input by the user, if all previous inputs are filled and password is correct.
Sorry for any formatting issues.
HTML:
<!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">
<title>Inlämningsuppgift</title>
<script src="JSny copy.js" defer></script>
</head>
<body>
<div id="errorOutput"></div>
<p id="output"></p>
<div>
<label for="UNameInput">Name Input</label>
<input id="UNameInput" name="name" type="text">
</div>
<div>
<label for="AgeInput">Age Input</label>
<input id="AgeInput" name="age" type="number">
</div>
<div>
<label for="PasswordInput">Password Input</label>
<input id="PasswordInput" name="password" type="password">
</div>
<button id="button">Submit</button>
</body>
</html>
JS Code:
let nameElement = document.getElementById("UNameInput");
let faultElement = document.getElementById("errorOutput");
let ageElement = document.getElementById("AgeInput");
let clickElement = document.getElementById("button");
let passwordElement = document.getElementById("PasswordInput");
clickElement.addEventListener("click", function (e) {
let feedback = [];
let users = [];
if (UNameInput.value === '' || UNameInput.value === null) {
feedback.push('Name input missing')
}
else if (AgeInput.value === '' || AgeInput.value === null) {
feedback.push('Age input missing')
}
else if (PasswordInput.value !== 'IHM') {
feedback.push('Password is not valid')
} else feedback.forEach((item, i) => {
if (ageElement.value < 18) {
feedback.push ("You are not of legal age")
}
else {
feedback.push("You are of legal age")
}
});
if (feedback.length > 0) {
e.preventDefault()
faultElement.innerText = feedback.join(", ")
}
});