Javascript Form input to Array to Table output

javascript

#1


The error is that the form will not display the contents of the array recieved by the input form.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="robots" content="noindex">

	<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"/>
      
</head>

	<!--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>
 
</html>


#2

Check your browser's js console for error messages


#3

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