html - how can i make my javascript to read the form value? -

html - how can i make my javascript to read the form value? -

i'm trying form allow user see details set fields after clicked button. reason javascript doesn't read values of text user set form. help?

<form> first name: <input type="text" autofocus autocomplete="on" placeholder="first name" required id="first"> lastly name: <input type="text" autocomplete="on" placeholder="last name" required id="last"> year of birth: <input type="number" pattern="^[0-9]{4}" id="year"> gender: <select id="sel"> <option selected>male</option> <option>female</option> </select> <button id="butt">click</button> </form>

the javascript :

function cont(){ function person() { this.firstname = null; this.lastname = null; this.yearofbirth = null; this.gender = null; this.weight = null; this.height = null; this.country = null; this.fullname = function() { homecoming this.firstname + " " + this.lastname }; this.age = function() { var today = new date(); var yy = today.getfullyear(); homecoming yy - this.yearofbirth; }; this.tostring = function() { homecoming "this rider lives in " + this.country + " , name " + this.firstname + " " + this.lastname; }; } var rider = new person rider.firstname = document.getelementbyid('first').value rider.lastname = document.getelementbyid('last').value rider.yearofbirth = document.getelementbyid('year').value rider.gender = document.getelementbyid('sel').value document.getelementbyid('butt').onclick = function() { if (rider.firstname != typeof ("hello") || rider.lastname != typeof("hi") || rider.yearofbirth == isnan) { alert ("fill required fields") } else { document.write(rider.firstname + "<br>") document.write(rider.lastname + "<br>") document.write(rider.yearofbirth + "<br>") document.write(rider.gender + "<br>") document.write(rider.fullname() + "<br>") } } }

you setting "rider." values when page loads (and empty) not getting them 1 time again when user clicks button. thus, document.write functions writing empty values. try:

document.getelementbyid('butt').onclick = function() { rider.firstname = document.getelementbyid('first').value; rider.lastname = document.getelementbyid('last').value; rider.yearofbirth = document.getelementbyid('year').value; rider.gender = document.getelementbyid('sel').value; if (rider.firstname != typeof ("hello") || rider.lastname != typeof("hi") || rider.yearofbirth == isnan) { alert ("fill required fields"); } else { document.write(rider.firstname + "<br>"); document.write(rider.lastname + "<br>"); document.write(rider.yearofbirth + "<br>"); document.write(rider.gender + "<br>"); document.write(rider.fullname() + "<br>"); } } }

javascript html forms