Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>Question Three</title>

<script>

function displayDetails() {
    var name = document.getElementById("first").value;
    var last = document.getElementById("last").value;
    var birth = document.getElementById("birth").value;
    var eye = document.getElementById("eye").value;
    var div = document.getElementById("test");
    var details = document.createTextNode("Your details: " + name + ", " + last + ", " + birth + ", " + eye + ".");
    div.appendChild(details);
    console.log(name);
    console.log(eye);
    console.log("test");
}


</script>

</head>

<body>
<div id="test">
<form id = "myForm">

<span> First Name: </span> <input id = "first" type = "text"/> <br/> <br/>
<span> Last Name: </span> <input id = "last" type = "text"/> <br/> <br/>
<span> Date of Birth: </span> <input id = "birth" type = "date"/> <br/> <br/>
<span> Eye Colour: </span> <select id = "eye" name = "eye Colour: ">
    <option> </option>
    <option> Blue </option>
    <option> Green </option>
    <option> Grey </option>
    <option> Brown </option>
    <option> Other </option>
</select>
<br/> <br/>
<input type="button" value="Submit" onClick="displayDetails()" />

</form>

    </div>


</body>
</html>