I am trying to figure out out to loop over all the persons in the people array a
ID: 3713077 • Letter: I
Question
I am trying to figure out out to loop over all the persons in the people array and display each one on its own line. Also, please let me know if the "push" part is correct. Here is my HTML and Javascript code:
JAVASCRIPT CODE:
var person = null;
var people = [ ] ;
function addPerson()
{
var inputName = document.getElementById("name").value,
inputAge = parseFloat(document.getElementById("age").value);
person = { name: inputName, age: inputAge };
person.push = {inputName,inputAge}
// Push person to the end of the people array.
}
function displayPeople()
{
var out = document.getElementById("output");
out.innerHTML = "";
var outputName = person.name;
var outputAge = person.age;
out.innerHTML = outputName + " is " + outputAge + " years old.";
// Loop over all the persons in the people array and display each one on its own line
}
function clearPeople()
{
person = null;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Lab10 demo</title>
<script type="text/javascript" src="lab10demo.js"></script>
</head>
<body>
<h1>Person demo</h1>
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
<td></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" id="age"></td>
<td><input type="button"
value="Add Person to Database"
></td>
</tr>
<tr>
<td></td>
<td><input type="button"
value="Display Current Database"
></td>
<td><input type="button"
value="Clear Database"
></td>
</tr>
</table>
<hr>
<h3 id="output"></h3>
</body>
</html>
Explanation / Answer
updated JAVASCRIPT CODE:
var person = null;
var people = [ ] ;
function addPerson()
{
var inputName = document.getElementById("name").value,
inputAge = parseFloat(document.getElementById("age").value);
person = { name: inputName, age: inputAge };
people.push(person);
// Push person to the end of the people array.
}
function displayPeople()
{
var out = document.getElementById("output");
out.innerHTML = "";
var outputName='';
var outputAge =''
for(var i =0; i<people.length; i++){
outputName = people[i].name;
outputAge = people[i].age;
out.innerHTML = outputName + " is " + outputAge + " years old.";
}
// Loop over all the persons in the people array and display each one on its own line
}
function clearPeople()
{
person = null;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Lab10 demo</title>
<script type="text/javascript" src="lab10demo.js"></script>
</head>
<body>
<h1>Person demo</h1>
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
<td></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" id="age"></td>
<td><input type="button"
value="Add Person to Database"
></td>
</tr>
<tr>
<td></td>
<td><input type="button"
value="Display Current Database"
></td>
<td><input type="button"
value="Clear Database"
></td>
</tr>
</table>
<hr>
<h3 id="output"></h3>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.