<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>
<Below this line, add a link to the EXACT exercise that you are stuck at.>
<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
The error is that the form will not display the contents of the array recieved by the input form.
<title>JS</title>
<link rel="icon" type="favicon/ico" href="images/titleicon.png">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width, minimum-scale=1.0"/>
<!--mainbody-->
<body>
<h1>
<a>JS Practice. </a>
</h1>
<p>My friends list</p>
<label>Forename: </label>
<input type="text" name="fName" id="fName"><br>
<label>Surname:</label>
<input type="text" name="sName" id="sName"><br>
<label>Age:</label>
<input type="text" name="age" id="age">
<input type="submit" value="Add" onclick="add()"/>
<script type="text/javascript">
function add(){
function Person(fName, sName, age) {
this.fName = fName,
this.sName = sName,
this.age = age
};
var people = new Array();
var fName = document.getElementById('fName').value;
var sName = document.getElementById('sName').value;
var age = document.getElementById('age').value;
if (fName.length === 0 || sName.length === 0 || age.length === 0) {
alert("Enter fields");
return;
} else {
var person = new Person(fName, sName, age);
people[people.length] = person;
drawTable(people);
}
};
</script>
<table>
<script type="text/javascript">
drawTable(people){
for (var i = 0; i < people.length; i++) {
document.write("<tr><td>" + i.fName + "</td><td>" + i.sName + "</td><td>" + i.age + "</td></tr>");
}
}
</script>
</table>
<!--mainbody-->
</body>
<do not remove the three backticks above>