getElementById : IE gives warning when element with ID is not present

[Ize]

During practically every project I do I'm facing the same problem at some point.

Picture this, I need to fetch an element with where "foobar" is its ID, to change its style:

var el = document.getElementById('foobar');
el.style.display = 'block';

No problem here.
But say, my page is a dynamic one, fetching content based on GET-variables. Say my foobar-element disappears from the document, due to GET-variables being set differently.
Of course, Javascript can't find the element. Firefox handles this pretty well by failing silently in the background. IE on the other hand, shows an ugly warning message to my poor users, that el doesn't has a style-property!

The workaround:

if (document.getElementById('foobar') {
  var el = document.getElementById('foobar');
  el.style.display = 'block';
}

But this is just stupid. What if I want to fetch a hundred elements? Plus it doesn't look or read nice.

Is there a quick solution to this problem?

[AutisticCuckoo]

I don't think that's stupid (except for the typo ).
It would be much more stupid to try to assign a property to something that is undefined.

In any professional development environment, you need to do error checking. Verify that the object exists before trying to do anything with it.

If you do this a lot, why not make a function out of it?

function displayAsBlock(id)
{
    var  el = document.getElementById(id);
    if (el) el.style.display = "block";
}

displayAsBlock("foobar");
displayAsBlock("snafu");

Cleaner and easier to read IMHO.

[Ize]

Originally Posted by AutisticCuckoo

I don't think that's stupid (except for the typo ).
It would be much more stupid to try to assign a property to something that is undefined.

In any professional development environment, you need to do error checking. Verify that the object exists before trying to do anything with it.

If you do this a lot, why not make a function out of it?

function displayAsBlock(id)
{
    var  el = document.getElementById(id);
    if (el) el.style.display = "block";
}

displayAsBlock("foobar");
displayAsBlock("snafu");

Cleaner and easier to read IMHO.

Of course, I make functions out of most often used actions, but this just... I dunno, it feels like there should be an easier way

And what I actually meant with "too often" was the situation. It's not about the effect, it's about how I get there.

[AutisticCuckoo]

Originally Posted by Ize

I dunno, it feels like there should be an easier way

try {
    document.getElementById("foobar").style.display = "block";
    document.getElementById("snafu").style.display = "block";
    ...
} catch (e) {
    if (e.name != "TypeError") throw e;
}

[Ize]

Originally Posted by AutisticCuckoo

try {
    document.getElementById("foobar").style.display = "block";
    document.getElementById("snafu").style.display = "block";
    ...
} catch (e) {
    if (e.name != "TypeError") throw e;
}

Sod ya

[Kravvitz]

Originally Posted by Ize

Of course, Javascript can't find the element. Firefox handles this pretty well by failing silently in the background. IE on the other hand, shows an ugly warning message to my poor users, that el doesn't has a style-property!

I expect that Firefox is generating an error in the JavaScript Console. Firefox just doesn't open the JavaScript Console when an error occurs by default.

[felgall]

Opera usually sticks the error message in the Console and terminates the script at that point and you have to open the console to find the error.

What about this for a shorter version that combines the assignment (hence single equals) into the if test allowing the whole thing to be done on one line:

if (el = document.getElementById('foobar') el.style.display = 'block';

[Ize]

Originally Posted by felgall

Opera usually sticks the error message in the Console and terminates the script at that point and you have to open the console to find the error.

What about this for a shorter version that combines the assignment (hence single equals) into the if test allowing the whole thing to be done on one line:

if (el = document.getElementById('foobar') el.style.display = 'block';

Hey that's not bad at all
Nice one, gonna remember this one.

[dek]

Originally Posted by felgall

if (el = document.getElementById('foobar') el.style.display = 'block';

Need... One... More.... Bracket....

if (el = document.getElementById('foobar')) el.style.display = 'block';

Although personally, I'd still make a function call of it.

[Iain G]

If you're using the line:

var el = document.getElementById('foobar');

-all you need to do to test is:

if (el) el.style.display = 'block';

[felgall]

Originally Posted by Iain G

If you're using the line:

var el = document.getElementById('foobar');

-all you need to do to test is:

if (el) el.style.display = 'block';

That is just the one statement I posted split into two separate statements.

[stereofrog]

$ = function (id) {
  return document.getElementById(id);
}
//
$('foobar') && $('foobar').style.display = 'block';

[Iain G]

True, but I've never seen your example in the wild except where someone has mistyped their comparison operator as an assignment and browsers will throw warnings about it. The example I used is more usual.

[dek]

Felgall's tends to be more popular amongst the higher echelons of JS gurus (in my experience)
I've seen it all over, especially where brevity and elegance of coding are key (Mike Foster's code, for example, is filled with similar instances)

[Iain G]

You learn something new every day.