javascripthtmlincrementauto-generate

How do I generate an entity and code in an 'in-game' time that changes attributes such as the age of an entity?

I want to make a game that logs multiple things.

Therefore, every time the "advance year" button is pushed, the characters who have been generated after pushing its own button will have an age displayed as one plus their original auto-generated age.

I am new to coding and all this is so new to me, but I really am inspired to make a simulator-type auto-generation.

I cannot seem to get the updated-yearly age to display on HTML.

Here is my code so far:

const testTime = document.createElement("testTime");
testTime.classList.add('testTime');
document.body.appendChild(testTime);
testTime.setAttribute("id", "testTime");
var cEBtn = document.createElement("button");
document.body.appendChild(cEBtn);
cEBtn.innerHTML = "Change Year";
cEBtn.setAttribute("id", "cEBtn");
testTime.innerHTML = "Year: 0";
let year = 0;
cEBtn.onclick = function changeYear() {
  year++;
  testTime.innerHTML = "Year:" + " " + year;
  return year;
}
console.log(year);


//Attribute: Name
let firstNames = ["Kai", "Luca", "Talon", "Marce", "Caleb", "Debra",
  "Yvette", "Grey", "Ellison", "Judan", "Indigo", "Zion"
];

let lastNames = ["Samuels", "Hillick", "Kori", "Asher", "Paul", "Ozzla",
  "Allen", "Belko", "Wilson", "Adams", "Johnson", "Pierceson"
];


//Create Person Function


function createPerson() {

  const resident = document.createElement("resident");
  resident.classList.add('resident');
  document.body.appendChild(resident);
  const name = document.createElement("div");
  resident.append(name);
  name.setAttribute("id", "name");
  name.innerHTML = determineName();

  function determineName() {
    let name = firstNames[Math.floor(Math.random() * firstNames.length)] + " " + lastNames[Math.floor(Math.random() * lastNames.length)];;
    return name;
  }
  var age = document.createElement("div");
  resident.append(age);
  age.setAttribute("id", "age");
  let Age = Math.floor(Math.random() * (60 - 18) + 18);
  age.innerHTML = Aging();

  function Aging() {
    return Age;
  }
  if (cEBtn.onclick === true) {
    age.innerHTML = Aging() ++;
  }
}

if (cEBtn.onclick == true) {
  console.log("Hi")
}
<!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">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <header>
    <div class="header-title-container"></div>
    <h1>simulation prototype</h1>
    </div>
    <button class="createperson" onclick="createPerson()">Create Person</button>
  </header>

  <script src="index.js"></script>
</body>

</html>

Solution

  • When you increase the year, you need to get all the created people's html elements and inside every one of those update the text value of their age html element.

    You've got the right idea by setting each resident's element's class to "resident". This will help us find all of them.

    You need to do the same for the resident's age element. Instead of setting the id to "age" (age.setAttribute("id", "age")), set the class to "age" (age.classList.add("age");), because id is supposed to be unique on the whole document.

    You can find all residents' elements by using const residentElements = document.getElementsByClassName("resident");

    Then for each resident element go inside them and find the age element by its classname and update the age value.

    const residentElements = document.getElementsByClassName("resident");
for (const residentElement of residentElements) {
    const ageElement = residentElement.getElementsByClassName("age")[0];
    const age = parseint(ageElement.innerHTML);
    ageElement.innerHTML = age + 1;
}