document.getElementById breaks the code

Question

JavaScript

document.write(screen.width+'x'+screen.height);

var screenres='test';
document.write(screenres);
document.write('BBBBBBBBBBBBBBBBBBBBBBBBBBBB');

document.getElementById('resolutionfield').value = screenres;
document.write(screenres);
document.write('AAAAAAAAAAAAAAAAA');

I am trying to get the users screen resolution and pass it into an HTML post method. This snippet only prints out 1368x768testBBBBBBBBBBBBBBBBBBBBBBBBBBBB if I disable the document.getElementById line by adding two slashes in front of it, it prints everything out perfectly.

JavaScript

document.write(screen.width+'x'+screen.height);

var screenres='test';
document.write(screenres);
document.write('BBBBBBBBBBBBBBBBBBBBBBBBBBBB');

//document.getElementById('resolutionfield').value = screenres;
document.write(screenres);
document.write('AAAAAAAAAAAAAAAAA');

I am playing with this for the last 4 hours. It might be a simple problem but I just not able to figure it out.

Further down in my code

document.getElementById('secondsfield').value = seconds;
document.getElementById('minutesfield').value = minutes;
document.getElementById('hoursfield').value = hours;

these variables get passed on into the post method without any problems

HTML

<input type="hidden" id="usersipaddress" name="usersipaddress" value= "<?php echo $_SERVER['REMOTE_ADDR'];?>" >
<input type="hidden" id="secondsfield" name="secondsfield" value="" >
<input type="hidden" id="minutesfield" name="minutesfield" value="" >
<input type="hidden" id="hoursfield" name="hoursfield" value="" >
<input type="hidden" id="resolutionfield" name="resolutionfield" value="screenres" >

Anybody has the answer to this?

I suggest you read this http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — elclanrs, Feb 24 '14 at 04:28
What error do you get? Where is the script placed (in relation to the inputs)? — Bergi, Feb 24 '14 at 04:28
Do the elements exist yet? JavaScript runs while the DOM is being constructed. — Jonathan Lonowski, Feb 24 '14 at 04:29
I only used document.write to try to debug my code. It does not appear in my original code. I could not figure out why is my variable not passed on. — , Feb 24 '14 at 04:31
[I don't see anything wrong.](http://codepen.io/Chevex/pen/gEpmi) — Chev, Feb 24 '14 at 04:32
I don't get any errors, it just stops printing after the getelementbyid part. — , Feb 24 '14 at 04:33
@AlexFord Your example may have introduced a "*fix*" compared to the OP's code -- the ` — Jonathan Lonowski, Feb 24 '14 at 04:33
@Jonathan After reading an answer below I thought the same thing :) — Chev, Feb 24 '14 at 04:34
@Sandor Click [here](http://codepen.io/Chevex/pen/gEpmi) to see your code working. Click [here](http://codepen.io/Chevex/pen/buKFo) to see how it fails by moving the input. Remember that the [DOM](http://en.wikipedia.org/wiki/Document_Object_Model) is built by parsing the HTML document from top to bottom. If your script references elements that exist below the script then the browser has not processed them yet; they don't exist. — Chev, Feb 24 '14 at 04:37

score 3 · Accepted Answer · answered Feb 24 '14 at 04:30

If this line:

document.getElementById('resolutionfield').value = screenres;

is executed too early before the resolutionfield DOM element has been parsed and thus is present in the DOM, then this will cause an error and stop execution of your script. That's because:

document.getElementById('resolutionfield')

will be null and then when you try to reference the .value property, it will not work and will generate the error Uncaught TypeError: Cannot set property 'value' of null which you can see in the browser's error console or debug console.

This is correct :). @Sandor Click [here](http://codepen.io/Chevex/pen/gEpmi) to see your code working. Click [here](http://codepen.io/Chevex/pen/buKFo) to see how it fails by moving the input. — Chev, Feb 24 '14 at 04:34

document.getElementById breaks the code

1 Answers1