homepage Welcome to WebmasterWorld Guest from 54.166.122.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
document.getElementById is null
LouiseMarie

5+ Year Member



 
Msg#: 4142855 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4142855 posted 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

5+ Year Member



 
Msg#: 4142855 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4142855 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4142855 posted 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



 
Msg#: 4142855 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved