populate array with prompt input within a function

Question

So I've been at it for a while now but have no idea on how to proceed. My code asks the user for first name, last name and age of 3 people and then displays it into a table.

<script>
  function person(firstName, lastName, age) {

    for (var x = 1; x <= 3; x++) {

      this.firstName = prompt("Please enter a first name", "");
      while (this.firstName == null || this.firstName == "") {
        this.firstName = prompt("Invalid input. Please enter a first name", "");
      }

      this.lastName = prompt("Please enter a last name", "");
      while (this.lastName == null || this.lastName == "") {
        this.lastName = prompt("Invalid input. Please enter a last name", "");
      }

      this.age = prompt("Please enter an age", "");
      this.age = parseInt(this.age);
      while (this.age == null || isNaN(this.age) || this.age < 0) {
        this.age = prompt("Not a valid input. Please enter an age", "");
        this.age = parseInt(this.age);
      }
    }
  }
  
  var personDetail = new person ();
  
  document.writeln("<table>");
	document.writeln(" <tr>");
	document.writeln("  <th>First Name</th>");
	document.writeln("  <th>Last Name</th>");
	document.writeln("  <th>Age</th>");
	document.writeln(" </tr>");
	
	for (var z = 0; z < 5; z++) { 
		document.writeln(" <tr>"); 
		document.writeln("  <td>" + personDetail.firstName + "</td>"); 
		document.writeln("  <td>" + personDetail.lastName + "</td>");
		document.writeln("  <td>" + personDetail.age + "</td>"); 
		document.writeln(" </tr>"); 
	}	
	
	document.writeln("</table>");
  
</script>

I know that I have to collect the user input into an array, but i don't know how.

I've tried the following. Just taking the first name as an example:

  <script>
    function person(firstName[]) {

      for (var x = 1; x <= 3; x++) {
        this.firstName[x - 1] = prompt("Please enter a first name", "");
        while (this.firstName[x - 1] == null || this.firstName[x - 1] == "") {
          this.firstName[x - 1] = prompt("Invalid input. Please enter a first name", "");
        }
      }
    }

    var personDetail = new person();

    for (var z = 0; z < 3; z++) {
      document.writeln(personDetail.firstName[z]);
    }
  </script>

I know there are easier ways to do this but I need to use an object with a constructor function.

I tried that. The output however, returned only the final input by the user. I was trying to create an array out of firstName so that each input gets entered as an element into that array and then i could display it at the end — Abd
– Abd, Commented Jul 25, 2017 at 7:36
If i understand you right, try this code jsfiddle.net/0v7k1g7n — Kirill
– Kirill, Commented Jul 25, 2017 at 7:45
Or this jsfiddle.net/0v7k1g7n/1 Not sure what you exactly want — Kirill
– Kirill, Commented Jul 25, 2017 at 7:51
@Kirill Thanks a bunch. The output is right for both. It's what I've been trying to do. Just taking a few minutes to understand both codes. — Abd
– Abd, Commented Jul 25, 2017 at 7:58

Kirill · Accepted Answer · 2017-07-25 08:05:15Z

Use array to store person

jsfiddle.net/0v7k1g7n/

var people = [ new person (),  new person (),  new person () ];

var table = document.getElementById("people");
for(var i = 0; i < people.length; i++){
  table.innerHTML += "<tr><td>" + people[i].firstName + "</td><td>" + people[i].lastName + "</td><td>" + people[i].age + "</td></tr>"
}

or create an object for all

jsfiddle.net/0v7k1g7n/1

var People = function(){
  var data = [];
  var table = document.getElementById("people");

  this.addPerson = function(p){
    data.push(p);
    return this;
  }

  this.render = function(){
    for(var i = 0; i < data.length; i++){
      table.innerHTML += "<tr><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>" + data[i].age + "</td></tr>"
    }
  }
}

var p = new People();

p.addPerson(new person ()).addPerson(new person ()).addPerson(new person ()).render();

Collectives™ on Stack Overflow

populate array with prompt input within a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related