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.
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(", ")
}
});<!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>Why are you iterating feedback in your else statement?
When feedback array is empty (and it is when your code enters else statement) there is nothing that it can iterate over so it doesn't check if (ageElement.value < 18) hence no output.
const nameElement = document.getElementById("UNameInput");
const ageElement = document.getElementById("AgeInput");
const passwordElement = document.getElementById("PasswordInput");
const faultElement = document.getElementById("errorOutput");
const clickElement = document.getElementById("button");
clickElement.addEventListener("click", function (e) {
const feedback = [];
if (nameElement.value === '' || nameElement.value === null) {
feedback.push('Name input missing');
} else if (ageElement.value === '' || ageElement.value === null) {
feedback.push('Age input missing');
} else if (passwordElement.value !== 'IHM') {
feedback.push('Password is not valid');
} else {
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(", ");
}
});<!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>
</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>Updated jsfiddle: (Added name and age input to push message along with the legal notifcation)
You need to put AgeInput.value !== '' at the end of if else condition. Also, I remove the iteration of the feedback.push()
else if(AgeInput.value !== ''){
if (ageElement.value < 18) {
feedback.push ("You are not of legal age")
}else {
feedback.push("You are of legal age")
}
}