Untitled

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

<title>Question Three</title>

<style>

</style>

<script>

function displayDetails() {
    var form = document.getElementById("myForm");
    var name = document.getElementById("first").value;
    var last = document.getElementById("last").value;
    var birth = document.getElementById("birth").value;
    var eye = document.getElementById("eye").value;
    document.getElementById("test").innerHTML = ("Your details: " + name + ", " + last + ", " + birth + ", " + eye );
    console.log("test");


}


</script>

</head>

<body>

<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 = "text"/> <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/>
<button onclick = "displayDetails()"> Display </button>

 <br/> <br/>


</form>


<div id = "test">


</div>

</body>
</html>