Untitled

<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="UTF-8">
<script>
function clear()
{
	var element = document.getElementById("result");
	element.parentNode.removeChild(element);
}
function reset()
{
	clear();
	document.getElementById("info").reset();
}
function results() {
	var div = document.getElementById("main");
    var fName = document.getElementById("fName").value;
	var lName = document.getElementById("lName").value;
	var dob = document.getElementById("date").value;
	var color = document.getElementById("color").value;
	var results = document.createElement("div");
	results.id = "result";
	document.getElementById("main").appendChild(results);
	var details = document.createTextNode("Hello, " + fName + " " + lName + ", born on " + dob + " with eyes of the color " + color + ".");
	results.appendChild(details);
	}
</script>
</head>
<body>
<div id="main">
<form id="info">
First name:<input id="fName" /><br />
Last Name: <input id="lName" /><br />
DOB: <input type="date" id="date" /><br />
Eye Color: <select id="color">
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="brown">Brown</option>
  <option value="grey">Grey</option>
</select> <br />
<input type="button" value="Reset" onClick="reset()" />
<input type="button" value="Submit" onClick="results()" />

</form>
</div>
</body>
</html>