Javascript Form input to Array to Table output

<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>
1 Like

Check your browser’s js console for error messages

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.