How do I access dynamically created objects and their properties in JavaScript?

Question

If I write a function that creates a new person and attach it to an onClick event on a button, how can I access the data that was entered without a variable name?

When a user presses the button, the user can enter values when prompts come up, but nothing prints to the console upon completion?

I tried the followng code:

     <button type="submit" onClick="addNewPerson()">Add New Person</button>

     class Person {
       constructor(fname, lname, birthDate) {
         this.firstName = fname;
         this.lastName = lname;
         this.dov = birthDate;
       }
     }

     let person1 = new Person("Mark", "Johnson", "12-07-1972");
     let person2 = new Person("John", "Miller", "08-017-1923");

     function addNewPerson() {
       let ffname = prompt("enter your firstname", "Roger");
       let llname = prompt("enter your lastname", "Doger");
       let ddov = prompt("enter your date of birth", "July 6 2024");

       return new Person(ffname, llname, ddov);
     }

      console.log(addNewPerson())
      console.log(person1); 
      console.log(person2); 
      console.log(new Person(this.fname, this.lname, this.birthDate));

What I was expecting - When the button is clicked, the values entered into the prompts would be displayed in the console. It does not. This code only prints the following to the console:

    Object { firstName: "Roger", lastName: "Doger", dov: "July 6 2024" }
    Object { firstName: "Mark", lastName: "Johnson", dov: "12-07-1972" }
    Object { firstName: "John", lastName: "Miller", dov: "08-017-1923" }
    Object { firstName: undefined, lastName: undefined, dov: undefined }

The return value of an onclick function isn't saved anywhere. addNewPerson() can update the DOM, update a global variable, etc. — Barmar
– Barmar, Commented Jul 6, 2024 at 21:06
If you want the button click to display something in the console, put console.log() inside the function. — Barmar
– Barmar, Commented Jul 6, 2024 at 21:07
It's not clear why you would expect subsequent button clicks to print anything to the console. You have console logging statements after the function declarations, but those have nothing to do with the button clicks. — Pointy
– Pointy, Commented Jul 6, 2024 at 21:14

Ugwu Somto · Accepted Answer · 2024-07-06 21:48:33Z

1

The dynamically created person objects are not being stored or referenced properly outside the"addNewPerson" function

A different approach is to store dynamically created persons in an array

class Person {
      constructor(fname, lname, birthDate) {
        this.firstName = fname;
        this.lastName = lname;
        this.dov = birthDate;
      }
    }

    let persons = [];

    let person1 = new Person("Mark", "Johnson", "12-07-1972");
    let person2 = new Person("John", "Miller", "08-17-1923");

    persons.push(person1);
    persons.push(person2);

    function addNewPerson() {
      let ffname = prompt("Enter your firstname", "Roger");
      let llname = prompt("Enter your lastname", "Doger");
      let ddov = prompt("Enter your date of birth", "July 6 2024");

      let newPerson = new Person(ffname, llname, ddov);
      persons.push(newPerson);

      console.log(newPerson); 
    }
console.log(persons); 
console.log(person1); 
console.log(person2);

answered Jul 6, 2024 at 21:48

Ugwu Somto

4382 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ugwu Somto Over a year ago

Sure - you are welcome

Jason Bruce Over a year ago

That solution works!

Ugwu Somto Over a year ago

Sure you are welcome

Collectives™ on Stack Overflow

How do I access dynamically created objects and their properties in JavaScript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related