element id null issue

[blindmikey]

Hello everyone, I'm a newbie to javascript, and would absolutely love if someone could help me understand why it's returning that document.getElementById("footer") is null. What I need this to do is to add the appropriate class to the element with id="footer".

This is a php document in order to render only specific javascript depending on a variable from a cookie. If you view the link to the full script below, Everything but the problem area is working.

Code:

#Check to see if cookie has been set
if(isset($_COOKIE['isExtended']))
    { 
    #If it has, set $isExtended var to Cookie var
    $isExtended = $_COOKIE['isExtended'];
    #and echo current value
    echo "isExtended = $isExtended ;";
    #and set element's rendered class
    [COLOR="Red"]if($isExtended == 0) 
        {
        echo "document.getElementById('footer').setProperty('class','min');";
        }
        else {
        echo "document.getElementById('footer').setProperty('class','max');";
        }[/COLOR]
    }
#If it hasn't, echo default value
else 
{ 
echo "isExtended = 1 ;";
} 

Here is the link I'm working on: http://blog.blindmikey.com
And here is a direct link to the full script: http://blog.blindmikey.com/wp-conten...oterToggle.php

Thank you to anyone that can explain this to me, sad to admit, I've spent hours on this.
-mikey

[Kor]

setProperty() method is not to be applied upon the elements. It has to handle the CSS styleSheets, something like:

var oStyle = document.styleSheets[0].cssRules[0].style;
oStyle.setProperty('color','#ff0000','');

To change a class use DOM 0:

document.getElementById('footer').className='min';

[Fang]

I don't think setProperty will work, in all browsers, in this case.
IE requires className be set:

document.getElementById('footer').className='min';"

Same problem will occur with getProperty.
I didn't check if you were using this method with attribute style, but that will not work either.

[blindmikey]

Thanks for the replies guys, I really appreciate it.
However, I've tried using that line of code aswell.
I've used:
$('footer').setClass('min');
document.getElementById('footer').className='min';"
and the line of code posted above.

Each time I get a return message that 'footer' is null... which I don't understand since there is a div with the id of 'footer'...

I'm quite lost...

[Kor]

$('footer').setClass('min');

That is not a javascript plain code. $() means nothing in javascript. Nor setClass() method (this should be a custom function placed somewhere else... impossible to know how it works). Do you use a framework? In this case call the framework creators to help you. Usually frameworks bring troubles.

[blindmikey]

Hey Kor,
Thank you for your reply!

Yes, that particular way of fetching an element by id is from the Mootools framework, however, it's not the framework that I'm having an issue with, as no matter what syntax I use, even the most basic document.getElementById('footer').className='min';" returns that the footer is null.

The only question I have is why would it return the message of "document.getElementById("footer") is null" ?

I would greatly appreciate anyone that could help me understand this.

[Kor]

we need to see the whole picture. Do you have a test page?

[javawebdog]

May very well be a sequence problem.

Your javascript is attempting to take an action on an element BEFORE it is rendered to the page, hence the element is null.