trouble changing css styles with javascript

donrafeal7 · October 19th, 2006, 09:55 AM

my javascript won't change my styles and I don't understand why. From all the books I have been reading it looks like I'm using the correct syntax. please look at my syntax below and let me know if I am doing anything wrong here.

    function SelectRefTab()
    {
        document.all.body2.style.display='none';
        document.all.body1.style.display="inline";
    }

I've also tried the code example below but it never works. The syntax above only works the first time and thats it.

    function SelectRefTab()
    {
        document.getElementByID(Body2).style.display='none ';
        document.getElementByID(Body1).style.display="inli ne";
    }

please someone tell me what I'm doing wrong.

thanks,
Donrafeal7

mikevac · October 22nd, 2006, 09:15 PM

What does your html look like? Can you supply a clip?

Try this example:

html:

<div id="body1" onclick="SelectBdy('body2', 'body1');">
   <p>...stuff...</p>
</div>

<div id="body2" onclick="SelectBdy('body1', 'body2');" style="visiblity:hidden;display:none;">
   <p>...different stuff...</p>
</div>

<script>
function SelectBdy( showBody, hideBody )
{
   document.getElementById(hideBody).style.display='n one';
   document.getElementById(hideBody).style.visibility = 'hidden';
   document.getElementById(showBody).style.display='i nline';
   document.getElementById(showBody).style.visibility = 'visible';
}
</script>

donrafeal7 · October 23rd, 2006, 10:38 AM

thanks for the advice...below is a sample of my html with the javascript. You can see that I have some code commented out because I was trying many different things and none of it worked. I just don't understand why such simple code and logic isn't working.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">

function SelectRefTab() {
    var RefID1="Body1";
    var RefID2="Body2";
    //var b1 = document.getElementByID(RefID2);
        //b1.style.display = "none"
    //var b2 = document.getElementByID(RefID1);
        //b2.style.display = "inline"

    document.all.RefID2.style.display='none';
    document.all.RefID1.style.display="inline";

    //alert("Variable Test: " + RefID1 + " And " + RefID2);
}

function SelectRefTab2() {
    //var RefID1="Body1";
    //var RefID2="Body2";
    //var b1 = document.getElementByID(RefID1);
        //b1.style.display = "none"
    //var b2 = document.getElementByID(RefID2);
        //b2.style.display = "inline"

    document.all."body1".style.display="none";
    document.all."Body2".style.display="inline";
}
</script>
</head>
<body>
<form>
<span onclick="SelectRefTab()" id="T1"> Aaron & Ann </span>  
<span onclick="SelectRefTab2()" id="T2"> Tyron Evergreen Baptist Association </span>
<span id="Body1">Mr. Guy Hancock,<br /><br />On June 5-6, 2002 a crew from Guy's A/C inistalled a new Lennox Elite (5 tons) cooling and heating system in our home in Kingwood. The Crew was Steve (lead man), Mike, Mark and a dark haired man, whose name escapes me just now, (Steve called him "the attic rat"), who did all the duct work. Our salesman was John Nieman, and Ralph Conley was there much of the time as well.<br /><br />Kindest Regards,<br />Aaron & Ann<br />Kingwood, TX</span>
<span id="Body2">Dear Mr. Hancock;<br /><br />On behalf of the Preteen Camp Committe of Tryon Evergreen Baptist Associaiton, we would like to give you a tremendously big thank you for your help for obtaining an ice machine. Your kindness is greatly appreciated.<br /><br />Sincerely,<br />Barbara<br />Ministry Assistan</span>
</form>
</body>
</html>

thanks for any help you can provide,
Donrafeal7

joefawcett · October 23rd, 2006, 10:59 AM

Okay, your functions are bit wrong.
The way to access an element is:

Code:

var element = document.getElementById("Body1");
element.style.display = "none";

Note Id not ID.

If want to use document.all, and it's IE only so why would you?

Code:

document.all["Body1"].style.display = "none";

--

Joe (Microsoft MVP - XML)

donrafeal7 · October 23rd, 2006, 11:30 AM

thanks,
that worked. I didn't realize that javascript was case sensitive. Thank you very much. You have elemented a lot of frustration for me.

thanks,
Donrafeal7