I need the values that the user inputs in the boxes to be added to the [people] array, so that they can be typed out on the page with the predefined values object1 and object2, together with if they are of legal age or not. I am unsure if I should be using another method for this, the assignment I received was vary vague.
Im new to coding so please forgive any errors.
JS
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");
let corrElement = document.getElementById("output");
clickElement.addEventListener("click", function (e) {
let feedback = [];
let people = [];
let object1 = {
UNameInput: "Marcus",
ageElement: 33,
}
let object2 = {
UNameInput: "Cihan",
ageElement: 35,
}
people.push(object1, object2)
console.log(people)
/*
people.push(new person1("Marcus", 33));
people.push(new person2("Cihan", 35));
*/
if (UNameInput.value === '' || UNameInput.value === null) {
alert('Name input missing')
}
else if (AgeInput.value === '' || AgeInput.value === null) {
alert('Age input missing')
}
else if (PasswordInput.value !== 'IHM') {
alert('Password is not valid')
} else if (AgeInput.value !== ''){
if (ageElement.value < 18) {
feedback.push (
`Hi your name is ${UNameInput.value}. You are ${AgeInput.value} years old, which is not of legal age. Have a nice day!`
);
e.preventDefault()
}
else {
feedback.push(
`Hi your name is ${UNameInput.value}. You are ${AgeInput.value} years old, which makes you of legal age in Sweden. Have a nice day!`
);
e.preventDefault()
}
}
if (feedback.length > 0) {
e.preventDefault()
corrElement.innerText = feedback.join(", ")
}
else if (people.length > 0) {
corrElement.innerText = people.join (", ")
}
});
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>
<!-- Länk till JS-sourcet, det är denna koden som körs-->
<script src="JSny copy 2.js" ></script>
</head>
<body>
<!-- Div för error meddelanden, ifall det skulle vara så att de sker-->
<div id="errorOutput"></div>
<!-- P-tag för output av meddelanden, ID-attribut så att vi kan nå den specifikt ifrån JS-->
<p id="output"></p>
<!-- Nedanstående del består av 3 divvar, alla har input fält med varsitt ID så att de nås från JS-->
<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>
<!-- Knappen som sätter igång JS skriptet, ID så att man kan targeta ifrån JS-->
<button onclick="addToArray()" id="button">Submit</button>
</body>
</html>