document.getElementById is null

Forum Moderators: open

Message Too Old, No Replies

document.getElementById is null

LouiseMarie

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

Hi,

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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){
document.getElementById(divid).style.display="block";
}

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

daveVk

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

Rather than

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

try

<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"

LouiseMarie

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

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?

Fotiman

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

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:"

daveVk

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

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.

subexpression

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

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){
document.getElementById(divid).style.display="block";
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.