Push notice not being read

Question

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>

score 0 · Answer 1 · answered Dec 06 '21 at 09:09

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>

Alan Yu · Accepted Answer · 2021-12-07T01:48:32.427

0

Updated jsfiddle: (Added name and age input to push message along with the legal notifcation)

jsfiddle

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")
   }   
}

edited Dec 07 '21 at 01:48

answered Dec 06 '21 at 09:09

Alan Yu

1,462
12
21

1

Thank you! This solved my issue perfectly! Would you possibly know how to get the name and age inputs added to the push message, along with the legal notifcation? – cossab Dec 06 '21 at 21:49
@cossab i updated my answer, if this achieve your requirement please upvote, thank you – Alan Yu Dec 07 '21 at 01:27
Hi, I made some minor adjustments but the final result was the same! Thank you for the help Alan! – cossab Dec 07 '21 at 08:29
Hi again, out of curiosity! Is there a way to achieve the same results using a forEach method? – cossab Dec 08 '21 at 09:29
@cossab Im not sure about the same result you are talking to. Also, [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) is used for only in arrays. – Alan Yu Dec 08 '21 at 09:36
When pressing the button, the user input is added into the array. The forEach loops thru the array and types out everything that is in the array. So basically to achieve the same result as know, getting the 'name', 'age' and 'legal-notice' typed out, but using a forEach. – cossab Dec 08 '21 at 09:53
@cossab [jsfiddle](https://jsfiddle.net/o7mnz96c/) ,It's impossible to run like the code I provide before if you are using forEach. [How top stop forEach](https://stackoverflow.com/questions/34653612/what-does-return-keyword-mean-inside-foreach-function), there's no way to stop the forEach method. – Alan Yu Dec 08 '21 at 16:45
Okay, I understand. Is there a way to get objekt with predefined values, pushed into the array as well? For example - users.push(new person1("Human1", 33)); users.push(new person2("Human2", 35)); So when the button is pressed, it checks the user input values, and types that out as well as the above predefined "persons" – cossab Dec 09 '21 at 14:49

Push notice not being read

2 Answers2