I want to make a game that logs multiple things.
- Character (Displayed on html the list of its attributes, generated upon the push of a button, such as a “Generate Person” button. (vvv))
- Name (Name of a character – auto-generated)
- Age (From 18-60 – auto-generated)
- Time (in years, incrementing by 1 every time an “Advance Year” button is pushed.
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. I apologize if this is janky and looks stupid, I am very new to coding and this project has stumped me.
[ My Javascript, HTML, written on VSC]
Here is my Javascript 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")
}
Here is my HTML file:
<!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>
[I also apologize if I formatted this question incorrectly.]
