Welcome to WebmasterWorld Guest from 54.158.25.146

Forum Moderators: open

Message Too Old, No Replies

document.getElementById is null

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

Junior Member

5+ Year Member

joined:Apr 28, 2009
posts:57
votes: 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
2:07 pm on May 28, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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"
2:22 pm on May 28, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Apr 28, 2009
posts:57
votes: 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?
2:34 pm on May 28, 2010 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts:5003
votes: 20


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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.
5:49 pm on May 29, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:May 26, 2010
posts: 92
votes: 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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members