javascript - Unable to read input DOM element's value -

i have following html/js code :

function controller() {     document.write(document.getelementbyid("name").value)   ;     document.write(document.getelementbyid("id").value) ; } 

<input type="text" id="name"/> <input type="text" id="id"/> <input type="button" id="push" onclick="controller()"/> 

problem : when click on push button onclick fired , controller function executed , able retrieve value of element having id name second element having id idis not read , result following error second input element :

uncaught typeerror: cannot read property 'value' of null

i have been struggling hours unable understand making mistake can ?

your script read inputs values correctly, when first document.write statement execute override body when script try execute second 1 find no input , return error line :

uncaught typeerror: cannot read property 'value' of null

hope helps.

function controller()  {    console.log(document.getelementbyid("name").value);    console.log(document.getelementbyid("id").value);  }

<input type="text" id="name"/>  <input type="text" id="id"/>  <input type="button" id="push" onclick="controller()"/>