Re: [WSG] getElementById() always returns null
Hi Chris,
As JavaScript isn't a precompiled language (rather a scripting one),
functions, objects and variables are processed one after another,
following the source order. When you declare your variables, the browser
is not yet aware of the existence of the two requested elements. You
have several alternatives:
To place your script after the two "a" and "p" elements, inside the body
tags ( it's probably not the nicest way but it functions...):
-
JavaScript Testing
a { font: normal 24px "Trebuchet MS"; }
p { display: none; }
Hover toggle
Hello world!
var toggle = document.getElementById('toggle');
var onoff = document.getElementById('onoff');
toggle.onmouseover = function() {
onoff.style.display = 'inline';
}
toggle.onmouseout = function() {
onoff.style.display = 'none';
}
To write a simple function and call it with the onmouseover and
onmouseout event handlers inside the elements tags:
JavaScript Testing
a { font: normal 24px "Trebuchet MS"; }
p { display: none; }
function toggle(status) {
var onoff = document.getElementById('onoff');
onoff.style.display = status;
}
onMouseOut="toggle('none');">Hover toggle
Hello world!
---
To write a more complicated function and call it with a onLoad event
handler in the body tag, which delays the processing of the function and
its variables till all the objects are loaded in memory by the browser:
JavaScript Testing
a { font: normal 24px "Trebuchet MS"; }
p { display: none; }
function toggleOnOff() {
var toggle = document.getElementById('toggle');
var onoff = document.getElementById('onoff');
toggle.onmouseover = function() {
onoff.style.display = 'block';
}
toggle.onmouseout = function() {
onoff.style.display = 'none';
}
}
Hover toggle
Hello world!
-
HTH!
Roberto
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] getElementById() always returns null
Dear All,
Let you know why this problem is coming. Actually I am
a bit busy with my work, if not I would have sent the
cause.
Regards,
Malla
--- Ben Wong <[EMAIL PROTECTED]> wrote:
> It's because the code is being executed before the
> tags with the
> matching ids are created.
>
> On 12/6/05, Chris Lamberson <[EMAIL PROTECTED]>
> wrote:
> > Through foresight, i already know this will be a
> very pitiful question to
> > real web designers, so bear with me.
> >
> > I was having some trouble finding out why,
> whenever I call for
> > document.getElementById(id), it returns null (even
> if there is a valid
> > id-matching element). Consider something simple,
> like this:
> >
> >
> >
> > JavaScript Testing
> >
> > a { font: normal 24px "Trebuchet MS"; }
> > p { display: none; }
> >
> >
> > var toggle =
> document.getElementById('toggle');
> > var onoff =
> document.getElementById('onoff');
> > toggle.onmouseover = function() {
> > onoff.style.display = 'inline';
> > }
> > toggle.onmouseout = function() {
> > onoff.style.display = 'none';
> > }
> >
> >
> >
> > Hover toggle
> > Hello world!
> >
> >
> >
> > Sorry I don't have a live example. The point is
> that the getElementById()
> > calls for some reason appear to return null, as if
> they didn't find
> > anything. Thanks, any help is appreciated!
> >
>
>
> --
> Ben Wong
> e: [EMAIL PROTECTED]
> w: http://blog.onehero.net
>
**
> The discussion list for
> http://webstandardsgroup.org/
>
> See
> http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting
> help
>
**
>
>
__
Enjoy this Diwali with Y! India Click here
http://in.promos.yahoo.com/fabmall/index.html
__
Enjoy this Diwali with Y! India Click here
http://in.promos.yahoo.com/fabmall/index.html
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] getElementById() always returns null
Chris Lamberson wrote: I think that's the problem I had on both http://members.ij.net/mrmazda/tmp/dpi-broken.html and http://members.ij.net/mrmazda/auth/dpi-screen-window.html in certain development builds of Gecko recently until I got some help with a workaround now found in the latter but not the former. Don't ask me to know how it works. I don't see that problem any more either. -- "Blessed is the nation whose God is the Lord."Psalm 33:12 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://members.ij.net/mrmazda/auth/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] getElementById() always returns null
Nevermind, ignore what I said, Bert is right. Although IE may misbehave
as well, it seems pretty inconsitent and buggy.
On Tue, 2005-12-06 at 09:21 +0800, Bert Doorn wrote:
> G'day
>
> > I was having some trouble finding out why, whenever I call for
> > document.getElementById(id), it returns null (even if there is a valid
> > id-matching element). Consider something simple, like this:
>
> The javascript runs as the page loads. At that point, the
> elements with the ids do not yet exist in the DOM tree (as they
> are still to be loaded). You'll need to delay the script until
> the page has loaded. Something like:
>
> function init() {
>var toggle = document.getElementById('toggle');
>var onoff = document.getElementById('onoff');
>toggle.onmouseover = function() {
> onoff.style.display = "block"
>}
>toggle.onmouseout = function() {
> onoff.style.display = "none"
>}
> }
> window.onload=init;
>
>
> Regards
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] getElementById() always returns null
What browser are you using?
That should work on most of them, but Internet Explorer has a
mis-feature were it does something really wierd. I think what it does is
assigns elements with id's to variables with the id's name. I'm not sure
though, I haven't tested it out enough.
The consequence though is that if you try to assign an element to a
variable with the same name as that elements id, IE will fail to assign
the element (the variable will still be null) and it may give a really
cryptic complaint later on if you try to use it again.
Alan Trick
On Tue, 2005-12-06 at 00:58 +, Chris Lamberson wrote:
> . . . .
>
> var toggle = document.getElementById('toggle');
> var onoff = document.getElementById('onoff');
>
> . . . .
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] getElementById() always returns null
G'day
I was having some trouble finding out why, whenever I call for
document.getElementById(id), it returns null (even if there is a valid
id-matching element). Consider something simple, like this:
The javascript runs as the page loads. At that point, the
elements with the ids do not yet exist in the DOM tree (as they
are still to be loaded). You'll need to delay the script until
the page has loaded. Something like:
function init() {
var toggle = document.getElementById('toggle');
var onoff = document.getElementById('onoff');
toggle.onmouseover = function() {
onoff.style.display = "block"
}
toggle.onmouseout = function() {
onoff.style.display = "none"
}
}
window.onload=init;
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] getElementById() always returns null
The _javascript_ that's assigning the behavior to your elements is completing before the elements are in the dom. Try putting your _javascript_ code in a function and calling that function with window.onload like this:
window.> function do() {
var toggle = document.getElementById('toggle');
var > toggle. {
onoff.style.display = 'inline';
}
toggle. {
onoff.style.display = 'none';
}
}