Internet explorer debugger javascript error on page load

Question

Every time I run the page in i.e10 the JavaScript debugger window comes up and displays undefined error of 'style'. I was trying the JavaScript way instead of jQuery.

It is proving hassle...

var displayPackets = document.getElementById('pnl_emailFtp');
// set style to 'display:none;'
displayPackets.style.display = "none";

var smlPkt = document.getElementById('small-packet');
var lrgPkt = document.getElementById('large-packet');

// Shows the 'panel' where the 'small/Large' pkts are.
var radButton = document.getElementsByName('secureData');
// Check radio button has been clicked and show 
// Small/Large packet boxes.
if (radButton.checked = true) {
    displayPackets.style.display = "block";
} else {
    displayPackets.style.display = "none";
}

Am I doing something wrong?

Have you tested the code in other browsers? Have they an error message in the console too? You said you're trying to do this without jQuery, are you sure the DOM is ready before executing the code? — Teemu, Jun 18 '13 at 13:45
yes chrome says cannot set style of null. ?? It is on a '
' is that allowed — StudentRik, Jun 18 '13 at 13:48
Just enclose your code within `window.onload` eventhandler, now you're trying to access a non-existing element. — Teemu, Jun 18 '13 at 13:49
@StudentRik I suppose you got it done, but anyway I added a debugging tip for IE for future references. — laconbass, Jun 18 '13 at 13:59
please note `if (radButton.checked = true)` will affect the value, not test it. You should use `if (radButton.checked == true)` instead, or even shorter `if (radButton.checked)` — Sebas, Jun 18 '13 at 14:24

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Maybe the error is on

var displayPackets = document.getElementById('pnl_emailFtp');

If for some reason displayPackets isn't a DOM element, you could get the error you comment.

If the element with pnl_emailFtp id effectively exist on the document, maybe you are trying to retrieve a reference to it before the document DOM is loaded or ready. In this case you can try:

window.load = function(){ ... }

as if you were using:

$.ready(function(){ ... }).

See also this Q&A and this Q&A for other options.

Tip for debugging strange errors on IE

Use the builtin alert() function. It stops the JavaScript execution until it's accepted so it can be used as a breakpoint.

The procedure is as follows:

Put an alert( 'ok' ); on the first line of your script (or at least above the line you think has the problem).
```
alert( 'ok' );
var displayPackets = document.getElementById('pnl_emailFtp');
```
Load your page and...
1. If the alert is shown drop it to the next line and repeat 2
```
var displayPackets = document.getElementById('pnl_emailFtp');
alert( 'ok' );
displayPackets.style.display = "none";
```
2. If the alert is not show, drop it to the previous line and repeat 2.
When you hit a line where 2.1 and 2.2 are infinitely repeated, you got the line of code causing the problem.

You should always use `console.log()` for debugging, **not** `alert()`. — dsgriffin, Jun 18 '13 at 14:37
OP is using IE10, but if you're genuinely using IE6 right now, I offer my support. I imagine it'd be soul destroying :p — dsgriffin, Jun 18 '13 at 15:03
haha my soul was destroyed in a past not so distant as I want. Fortunately nowadays I can consider my soul reborned from its ashes :P. PD: You're right, OP is using IE10 and everybody should use the `console` api to debug. — laconbass, Jun 19 '13 at 08:46

score 1 · Answer 2 · answered Jun 18 '13 at 13:55

Try to put your code within a window.onload handler function, something like this:

window.onload = function () {
  // Your code comes here
};

Or place the script just before ending body tag.

When you've had this snippet in jQuery's $(document).ready(...), the execution is delayed until all the DOM elements are available. When you're executing the code in the head during parsing time, the body and its content don't exist yet.

Internet explorer debugger javascript error on page load

2 Answers2

Tip for debugging strange errors on IE