Hello I am attempting to complete a project in JavaScript/HTML/CSS. I have most of the code for my project completed, but I have run into an issue where I cannot get the information from the text fields on my page to print to the webpage document. My code should extract a name and age from the user (on the page) and then list the entry (name and age) on the left side (in the sidebar). (<

THE HTML:

MAUI RESORT OR SOMETHING

Array of People:

Log a person:

First Name:

Age:

THE CSS:

html{

background-color: #ededed;

}

body {

margin: 40px;

background-color: #ededed;

}

.sidebar {

grid-area: sidebar;

}

.content {

grid-area: content;

}

.header {

grid-area: header;

color: white;

text-align: center;

}

.wrapper {

display: grid;

grid-gap: 10px;

grid-template-columns: 300px 1fr 1fr;

grid-template-areas:

"header header header"

"sidebar content content";

background-color: #ededed;

color: #444;

}

.box {

background-color: #444;

color: #fff;

border-radius: 5px;

padding: 20px;

}

.header {

background-color: black;

}

img.center{

margin: 0 auto 0 auto;

display: block;

}

.item{

text-align: center;

}

h2{

text-align: center;

}

@media screen and (min-width:200px) and (max-width: 479px) {

.wrapper{

grid-template-columns: 300px 1fr 1fr;

grid-template-areas:

"header header header"

"content content content"

"sidebar sidebar sidebar";

}

.sidebar {

grid-area: sidebar;

}

} /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */

@media screen and (min-width:480px) and (max-width: 599px) {

.wrapper{

grid-template-columns: 300px 1fr 1fr;

grid-template-areas:

"header header header"

"content content content"

"sidebar sidebar sidebar";

}

.sidebar {

grid-area: sidebar;

}

} /* smartphones, Android phones, landscape iPhone */

@media screen and (min-width:600px) and (max-width: 800px) {

} /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */

@media screen and (min-width:801px) and (max-width: 1000px) {

}

/* tablet, landscape iPad, lo-res laptops ands desktops */

@media screen and (min-width:1001px) and (max-width:1280px){

}

/* big landscape tablets, laptops, and desktops */

@media screen and (min-width:1281px)and (max-width: 1920px) {

/* hi-res laptops and desktops */

}

@media screen and (min-width:1921px)and (max-width: 3840px) {

/* hi-res laptops and desktops */

}

THE JAVASCRIPT:

let people = [];

let n = 100;

let a = 0;

class person{constructor(name, age)

{

let name = document.getElementById("name").value;

let age = document.getElementById("age").value;

let individual = name + age;

return individual;

}

};

class teacher extends person{

constructor(degree)

{

//iframe to add another

let degree;

this.degree = degree;

}

}

class student extends person{

constructor(major)

{

let major;

this.major = major;

}

}

class child extends person{

constructor(favoriteToy)

{

let favoriteToy;

this.favoriteToy = favoriteToy;

}

}

while (a

{

new person();

people.push(new person());

for (i=0; i

{

document.writeln(people[i]);

//printarray to the DOM

}

}