Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

document.getElementById is null



1:42 pm on May 28, 2010 (gmt 0)

5+ Year Member


I've got a html page with the following doctype:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

and an external javascript file attached in the head tag.

In the javascript file I have this function:
function showdiv(divid){

In the HTML it's called like this:
<a href="javascript:showdiv('fadedbg'); showdiv('popup');">My Tasks</a>

Can someone please help to explain why it's bring back the null error?

thanks in advance


2:07 pm on May 28, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Rather than

<a href="javascript:showdiv('fadedbg'); showdiv('popup');">My Tasks</a>


<a href="#" onclick="showdiv('fadedbg'); showdiv('popup'); return false;">My Tasks</a>

I assume you don't want to go anywhere so don't use href.

The "return false;" ensures the href is not actioned.

javascript: is not required.

I assume you have some div's with id="fadedbg" and id="popup"


2:22 pm on May 28, 2010 (gmt 0)

5+ Year Member

It works! Thank you for your help.

I made the changes that you suggested moving the function to onclick instead of href. You're right I don't need to go anywhere just display hidden divs on the page when the user clicks the link.

thanks for a quick reply :)

Can I just ask are there any times when "javascript:" is required?


2:34 pm on May 28, 2010 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

I have never encountered a situation where "javascript:" was required. In fact, until recently*, this was considered bad practice because in URLs the part before the : is the protocol and there was no such thing as a "javascript" protocol. It seems that this may be getting added to HTML5 [dev.w3.org], but I have not yet had the time to read up on it in detail (I've been meaning to start a thread about it).

* Note, I say "until recently" because it's not clear now whether this will continue to be the case. At this time, however, I would probably still recommend avoiding using "javascript:"


1:37 am on May 29, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

If you find a reason to place javascript in the href then "javascript:" is required

<a href="javascript:document.href='google.com'">Writes google.com ?</a>
<a href="document.href='google.com'">Bad Url</a>

There are sure to be some smart tricks where this useful, but not obvious to me.


5:49 pm on May 29, 2010 (gmt 0)

5+ Year Member

Hi LouiseMarie,

You could do several things, here's a few:
  • drop the href="" attribute <a onclick="showdiv('fadedbg'); showdiv('popup');">My Tasks</a>
  • use span instead <span onclick="showdiv('fadedbg'); showdiv('popup');">My Tasks</span>
  • use a return value to test if Javascript is enabled

But of course, span tags don't have the nice :link, :visited, and :hover pseudo classes.
I always take advantage of <a> tags for this reason.
Since you're not actually navigating anywhere, the anchor tag <a> doesn't need the href="" attribute.

The only reason I would use the href="" attribute in a similar situation is if I were accommodating users who don't have Javascript enabled.

Here's an example:

function showdiv(divid){
return true;

<a href="javascriptless.html" onclick="return !(showdiv('fadedbg') && showdiv('popup'))">My Tasks</a>

Since I added "return true;" to your function, the onclick attribute is testing for "false".
This will test if the function works, and if not, then the href="" navigation is activated...and they are sent to "javascriptless.html", or anywhere for that matter.

Featured Threads

Hot Threads This Week

Hot Threads This Month