I need help with appendChild() and Looping through my Arrays Correctly

JavaScript
1
  1. I created a form that take user name and age.
  2. Age is the verified then adds the person to a manor or adult array based on their age (that works)
  3. I looped through the respective arrays and display adult name to an adult list and manor to a manor list both in the web page( that works)
  4. what does is when I hit submit the previous name entered append to the list in addition to the new entry.
    Please help me.
const users = [];
const adults = [];
const manors = [];


function mngList() {

  addPerson();
  displayAdults(); // Call displayAdults to update the adults list
  displayManors(); // Call displayManors to update thedults();

};function addPerson() {
  let name = document.getElementById("name").value;
  let age = Number(document.getElementById("age").value);

  users.push({ name: name, age: age });
  console.log(users);
  document.getElementById("name").value = ""; // This line resets the form
  document.getElementById("age").value = ""; // This line resets the form
  
  // verify if the user is adult or manor and 
  for (let i = 0; i < users.length; i++) {
    if (users[i].age >= 18) {
      adults.push(users[i]);
    
    }
     else {
      manors.push(users[i]);
      
    }
   
  }
   
};

  function displayAdults() {
    const list = document.getElementById('adults-list');
    list.innerHTML = ""; // clear the list

    // create loop through adults array
    for (const item of adults) {
      const listItem = document.createElement('li');
      listItem.textContent = item.name;
      list.appendChild(listItem);

    }
  };


  function displayManors() {



    const list = document.getElementById('manor-list');
    list.innerHTML = ""; // clear the list

    // create loop through adults array
    for (const item of manors) {
      const listItem2 = document.createElement('li');
      listItem2.textContent = item.name;
       list.appendChild(listItem2);

    }


  };



<input type="text" id="name" >
    <input type="number" id="age">
    <button type ="submit" onclick="mngList()">Submit</button>

  <p>Adult List:</p>
  <ol id="adults-list"></ol> 
  <p>Manor List:</p>
  <ol id="manor-list"></ol>
2

Hi @kofasunday1847

You need to add a condition, check if the array does not include the user with matching age.

Manor means an old large house.
Minor means a young person.

Happy coding

3

@teller890 I don’t know how to do that. Can you help that. I am a code newbie.

4

Got fixed. The problem was this for loop.

// verify if the user is adult or manor and 
  for (let i = 0; i < users.length; i++) {
    if (users[i].age >= 18) {
      adults.push(users[i]);
    
    }
     else {
      manors.push(users[i]);
      
    }

here is the right way


          // Classify user into adults or minors
            if (age >= 18) {
                adults.push({ name: name, age: age });
            } else {
                minors.push({ name: name, age: age });
            }
1 Like