Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
|
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old October 19th, 2006, 09:55 AM
Authorized User
 
Join Date: Oct 2006
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Default trouble changing css styles with javascript

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

 
Old October 22nd, 2006, 09:15 PM
Registered User
 
Join Date: Oct 2006
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to mikevac
Default

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>


 
Old October 23rd, 2006, 10:38 AM
Authorized User
 
Join Date: Oct 2006
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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">&nbsp;Aaron & Ann&nbsp;</span>&nbsp;&nbsp;
<span onclick="SelectRefTab2()" id="T2">&nbsp;Tyron Evergreen Baptist Association&nbsp;</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

 
Old October 23rd, 2006, 10:59 AM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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)
 
Old October 23rd, 2006, 11:30 AM
Authorized User
 
Join Date: Oct 2006
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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






Similar Threads
Thread Thread Starter Forum Replies Last Post
db-driven css styles? lancer ASP.NET 2.0 Basics 1 July 16th, 2006 11:51 PM
shorting CSS styles crmpicco CSS Cascading Style Sheets 8 February 20th, 2006 12:22 PM
Styles.CSS in ASP.NET rajen CSS Cascading Style Sheets 2 July 22nd, 2005 04:54 PM
Css styles in mx Adam H-W Dreamweaver (all versions) 4 December 19th, 2003 01:25 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.