dynamic class - possible? 2

[Einstein47]

Hey all,

I have a web page where if a certain radio box is selected then other elements on a form are required. I would like to have a CSS class of

.itemRequired { visibility: hidden; }

and then have a JavaScript method that would dynamically change the class to be

{ visibility: visible; }

so that the required field incidator mark would then be displayed.

Is that possible? I have tried a few things but nothing seems to work. I know I must be missing something in the DOM.

My code is generated from JSP so it is really ugly. If you need I can try to give a sample mock up of the code, for a better illustration. But if the answer is a simple no, not possible I'll not waste my time.

Thanks,

Einstein47
("Tribulations are God's megaphone to awaken a deaf world." - C.S. Lewis)

 

[jemminger]

sure...

var el = document.getElementById("myElement"
el.style.visibility = "visible";

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); }

 

[Einstein47]

Jeff,

I tried that already - and that would be the way to go if I only had 1 element on the page that I wanted to affect the visibility. However, when the user selects YES I want about 8 items to have their own * (required indicator) to become visible.

Obviously I'll need to show some code.

<SCRIPT>
function onClickYes() {

// This will change all the elements individually
 document.getElementById(&quot;item1&quot;).style.visibility = &quot;visible&quot;;
 document.getElementById(&quot;item2&quot;).style.visibility = &quot;visible&quot;;
 document.getElementById(&quot;item3&quot;).style.visibility = &quot;visible&quot;;
 document.getElementById(&quot;item4&quot;).style.visibility = &quot;visible&quot;;
 document.getElementById(&quot;item5&quot;).style.visibility = &quot;visible&quot;;
 document.getElementById(&quot;item6&quot;).style.visibility = &quot;visible&quot;;
 document.getElementById(&quot;item7&quot;).style.visibility = &quot;visible&quot;;
 document.getElementById(&quot;item8&quot;).style.visibility = &quot;visible&quot;;
}

// What can change the class so that all of them change all at once?
// This next line does not work
  document.style.class(&quot;reqItem&quot;).visibility = &quot;visible&quot;;
</SCRIPT>

<STYLE>
#item1 { visibility: hidden; }
#item2 { visibility: hidden; }
#item3 { visibility: hidden; }
#item4 { visibility: hidden; }
#item5 { visibility: hidden; }
#item6 { visibility: hidden; }
#item7 { visibility: hidden; }
#item8 { visibility: hidden; }

.reqItem { visibility: hidden; }
</STYLE>
...

<FORM name=&quot;myForm&quot;>
Make the inputs required?
<INPUT type=&quot;radio&quot; name=&quot;myYesNo&quot; value=&quot;Yes&quot; onclick=&quot;onClickYes()&quot;>Yes
<INPUT type=&quot;radio&quot; name=&quot;myYesNo&quot; value=&quot;No&quot;>Yes
<P>
Name 1 <span class=&quot;reqItem&quot; id=&quot;item1&quot;>*</span> <INPUT type=&quot;text&quot; name=&quot;name1&quot;> <BR>
Name 2 <span class=&quot;reqItem&quot; id=&quot;item2&quot;>*</span> <INPUT type=&quot;text&quot; name=&quot;name2&quot;> <BR>
Name 3 <span class=&quot;reqItem&quot; id=&quot;item3&quot;>*</span> <INPUT type=&quot;text&quot; name=&quot;name3&quot;> <BR>
Name 4 <span class=&quot;reqItem&quot; id=&quot;item4&quot;>*</span> <INPUT type=&quot;text&quot; name=&quot;name4&quot;> <BR>
Name 5 <span class=&quot;reqItem&quot; id=&quot;item5&quot;>*</span> <INPUT type=&quot;text&quot; name=&quot;name5&quot;> <BR>
Name 6 <span class=&quot;reqItem&quot; id=&quot;item6&quot;>*</span> <INPUT type=&quot;text&quot; name=&quot;name6&quot;> <BR>
Name 7 <span class=&quot;reqItem&quot; id=&quot;item7&quot;>*</span> <INPUT type=&quot;text&quot; name=&quot;name7&quot;> <BR>
Name 8 <span class=&quot;reqItem&quot; id=&quot;item8&quot;>*</span> <INPUT type=&quot;text&quot; name=&quot;name8&quot;> <BR>
</FORM>

As you can see - putting all the individual elements inside the JavaScript is possible (that's what I'm doing now). But I would like a more general solution. Because if the elements change (more elements, less elements) I would have to modify 3 places with the current system.

Does this make more sense now?

Einstein47
("Tribulations are God's megaphone to awaken a deaf world." - C.S. Lewis)

 

[TruthInSatire]

I'm not sure of the exact syntax but I think it's something like document.getElementById("item1&quot.classname==hiddenclass

maybe that'll work for you.

http://thereptilian.com/

 

[jemminger]

there is no function like "getElementsByClassName()", though you certainly could make one yourself if you wanted.

i would simply use a loop:

function onClickYes() {
	for (var x = 1; x <= 8; x++) {
		document.getElementById(&quot;item&quot; + x).style.visibility = &quot;visible&quot;;
	}
}

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); }

 

[WartookMan]

You can dynamically assign a new className using something like:

<style type=&quot;text/css&quot;>
.red {
	color: #ff0000;
}
.green {
	color: #00cc00;
}
</style>
<script type=&quot;text/javascript&quot;>
function change(obj) {
	alert(obj.className);
	obj.className=&quot;green&quot;;
	alert(obj.className);
}
</script>
<a class=&quot;red&quot; href=&quot;#&quot; onclick=&quot;change(this);&quot;>Click me</a>

Not quite a solution... but you'll get the idea.

Pete.


Web Developer / Aptrix CMS (LWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

 

[Einstein47]

I appreciate everyone's input. I can see that my thought process is similar to yours.

What I believe to be true is that you can change the style of an individual DOM element (either a single style attribute, or the style class that an element uses). However, I don't think it is possible to change a CSS class definition once loaded.

Meaning I can change the "Click Me" object's class from .red to .green, but I can't redefine .red after it has been loaded in the browser.

I guess that is a limitation that I'll have to live with.

Thanks again everyone. Maybe we can keep trying until we do find a way.

Einstein47
("Tribulations are God's megaphone to awaken a deaf world." - C.S. Lewis)

 

[BillyRayPreachersSon]

Einstein,

This will work for you... You can add as many items as you wish... And if you need to be able to toggle the "required" bit, simply add a class of "itemRequired" to the span.

Incidentally, the code assumes that you will always be using

<span>

tags for your "*", but if this every changes, simply change the tag type mentioned in line 16:

<html>
<head>

<style type=&quot;text/css&quot;>
.itemRequired
{
	visibility: hidden;
	color: #FF0000;
}
</style>

<script language=&quot;javascript&quot;>
<!--
function showRequired(displayFlag)
{
	var spanElementsArray = document.getElementsByTagName('span');
	for (var loop=0; loop<spanElementsArray.length; loop++)
	{
		if (spanElementsArray[loop].className == 'itemRequired') spanElementsArray[loop].style.visibility = displayFlag;
	}
}
//-->
</script>

</head>
<body>

<form name=&quot;myForm&quot;>
Make the inputs required?
<input type=&quot;radio&quot; name=&quot;myYesNo&quot; value=&quot;Yes&quot; onclick=&quot;showRequired('visible');&quot;>Yes
<input type=&quot;radio&quot; name=&quot;myYesNo&quot; value=&quot;No&quot; onclick=&quot;showRequired('hidden');&quot;>No
<br>
Name 1 <span class=&quot;itemRequired&quot;>*</span> <input type=&quot;text&quot; name=&quot;name1&quot;> <br>
Name 2 <span class=&quot;itemRequired&quot;>*</span> <input type=&quot;text&quot; name=&quot;name2&quot;> <br>
Name 3 <span class=&quot;itemRequired&quot;>*</span> <input type=&quot;text&quot; name=&quot;name3&quot;> <br>
Name 4 <span class=&quot;itemRequired&quot;>*</span> <input type=&quot;text&quot; name=&quot;name4&quot;> <br>
Name 5 <span class=&quot;itemRequired&quot;>*</span> <input type=&quot;text&quot; name=&quot;name5&quot;> <br>
Name 6 <span class=&quot;itemRequired&quot;>*</span> <input type=&quot;text&quot; name=&quot;name6&quot;> <br>
Name 7 <span class=&quot;itemRequired&quot;>*</span> <input type=&quot;text&quot; name=&quot;name7&quot;> <br>
Name 8 <span class=&quot;itemRequired&quot;>*</span> <input type=&quot;text&quot; name=&quot;name8&quot;> <br>
</form>

</body>
</html>

Hope this helps,

Dan

 

[Einstein47]

Thanks Dan,

That is the closest thing to a "one size fits all" approach. I like that it using the SPAN tag as a filter but then also looks at the className to make sure that other SPAN elements won't be affected.

I guess I need to learn more about the DOM to know just what information is available to my scripts. My O'Reily book on DHTML is a little out of date.

Einstein47
("Tribulations are God's megaphone to awaken a deaf world." - C.S. Lewis)

 

[BillyRayPreachersSon]

Yeah - same here - mine is the now-8-year-old 1998 first edition ;o)

 

[BabyJeffy]

Don't throw it away BillyRay... in another 8 years it'll probably be worth a fortune (assuming you haven't worn the pages through by then)!

*grin*
Jeff

 

[Einstein47]

"the now-8-year-old 1998 first edition"

so, are you living in 2006? Please, tell me who wins the next few SuperBowls, NCAA Championships, NBA Championships, Kentucky Derbies, and Presidential Elections. I really need to beef up my wallet.

*grins* "Always in motion the future is."



Einstein47
("Tribulations are God's megaphone to awaken a deaf world." - C.S. Lewis)

 

[BillyRayPreachersSon]

Oh. erm... well spotted... My maths teacher would be proud of me ;o)

Dan