Topic awaiting preservation: I'm horrible at DHTML, and I need some help :) (Page 1 of 1)

ok here goes, I've made a function that can toggle an item's display property on and off. Now I want it when I click on something it switches everything off and then makes visible only one of them. It worked untill I hacked some code to make everything not display before it sets the one it wants to display. I don't think I'm explaining this too well, hopefully my code will help:

function toggle( targetId ){

  		target = document.all('coreyDos');

		target.style.display = "none";

  		target = document.all( adamDos );

		target.style.display = "none";

  		target = document.all( daveDos );

		target.style.display = "none";

  		target = document.all( luckyDos );

		target.style.display = "none";

  		target = document.all( brandonDos );

		target.style.display = "none";

  		target = document.all( gayKeithDos );

		target.style.display = "none";

  		target = document.all( joshDos );

		target.style.display = "none";

  		target = document.all( coolKeithDos );

		target.style.display = "none";

  		target = document.all( targetId );

  			if (target.style.display == "none"){

  				target.style.display = "";

  			} else {

  				target.style.display = "none";

  			}

}

What am I doin' wrong?

never mind never mind, sometimes it just takes my posting a question like this to figure out where I screwed up. I forgot the ' ' around the objects.

I know you've figured out the problem, but here's a tip anyway...

var alltargets = new Array('coreyDos', 'adamDos', 'daveDos', ... , 'coolKeithDos');
for (a=0; a < alltargets.length; a++)
{
target = document.all(alltargets[a]);
target.style.display = 'none';
}

That simplifies your code, especially if you decide you want to do something more than just change its display property. For instance, if you wanted to change the fontSize of each element, you would only need to write one line this way.

Thanks for the tip slime. I have a feeling that when I get this site done and post it for review it's gonna need a LOT of simplifying

Ok another problem

The elements that I was changing the display value of looked like this:

<table id="coreyDos" style="display: none; etc. etc. etc.">

I decided to get rid of the very long style declaration and have them all share a class. I did so and put the class in my style sheet and wahlah it broke

Now none of them display at all (so the style sheet is working by telling it them all to not display), but the JScript isn't. The Jscript was working right before I did this so I know I didn't mess it up. Another oddity is if I change the entire class to display: ; so that they all do display the code works fine except they are all displayed when the document loads. This isn't good because I always only want one displaying at a time. Could this be some kinda problem by setting both a class and an id for an object? What to do?!

Thanks yet again,
Schitzo

[This message has been edited by Schitzoboy (edited 02-06-2002).]

Post some code or a URL

http://wind.prohosting.com/thedorm/temp3.html

My jscript is in a seperate file (which is required to make the banner a popup instead of an embedded image http://wind.prohosting.com/thedorm/scripts/main.js

My CSS is also in a seperate file located here: http://wind.prohosting.com/thedorm/styles/main.css

[This message has been edited by Schitzoboy (edited 02-07-2002).]

404's... I'll try later...

It's working fine for me (IE6).

BTW, I just realized, don't set the display to "". If you want something displayed, set the display to "block" or "inline" or whatever's applicable to that element.

Yeah, I musta fixed it just before you tried. It was a problem with not using block.