trouble with javascript class

[Err]

Because I'm very short in time, I'll get right to the problem:I can't get this java script:

<script type="text/javascript"><!--elements = document.getElementsByTagName("p"); if (elements.className == 'test') {  document.style.display = 'block';}// --></script>

to "block" this content:

<p class="test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam  erat volutpat.</p>

with this CSS:

<style type="text/css">.test {  display: none;}</style>

The css display is set to none for the class ".test", but I'm trying to call the javascript to block that class thus the content is only seen when javascript is enabled. I do not want to use id's I know it works, I'm just trying to call a bunch of classes with that javascript. I edit that javascript myself, but it doesn't work.Here is a test page of what I'm talking about:[removed]You have to look at the source to see that some content is actually not displayed because of the style I have on it, but it should be blocked anyways becuase of the javascript I have on there... or so I thought, what am I doing wrong? and is there a work around for what I'm trying to do? Thank you very much for any help on this.

Edited November 12, 2009 by RahXephon

[Chocolate570]

Well, you might want to do this instead.

<script type="text/javascript"><!--elements = document.getElementsByTagName("p");for(i=0;i<=elements.length;i++) {if (elements[i].className == 'test') {  elements[i].style.display = 'block';}}// --></script>

Try that on for size. (I tested it on your page. It works perfectly. :)Choco

[Err]

Awesome. That worked VERY good. Thank you so much. (err... what do you mean you tested it on my web page? O_o?)I also wanted to ask if you know how to put 2 of those scripts together. Adding them together like the below example renders the javascript useless. It so far only works if they're in there own separate <script> tags.

<script type="text/javascript"><!--elements = document.getElementsByTagName("p");for(i=0;i<=elements.length;i++) {  if (elements[i].className == 'a') {	elements[i].style.display = 'block';  }}elements = document.getElementsByTagName("div");for(i=0;i<=elements.length;i++) {  if (elements[i].className == 'b') {	elements[i].style.display = 'none';  }}// --></script>

Please take a look at my web page again to see what I'm talking about. You can toggle your js on or off then refresh the page to see the result.[removed]

Edited November 12, 2009 by RahXephon

[scott100]

I also wanted to ask if you know how to put 2 of those scripts together. Adding them together like the below example renders the javascript useless. It so far only works if they're in there own seperate <script> tags.

You are using the same variable name twice, change you second code to elements2 or something.I haven't tried it but give this a bash.

<script type="text/javascript"><!--elements = document.getElementsByTagName("p");for(i=0;i<=elements.length;i++) {  if (elements[i].className == 'a') {	elements[i].style.display = 'block';  }}elements2 = document.getElementsByTagName("div");for(i=0;i<=elements2.length;i++) {  if (elements2[i].className == 'b') {	elements2[i].style.display = 'none';  }}// --></script>

[Chocolate570]

Thank you so much. (err... what do you mean you tested it on my webpage? O_o?)

I mean that I copied your page code and stuck it in a try it editor and added my script.

[jhecht]

<script type="text/javascript"><!--var ps = document.getElementsByTagName("p");for(i=0;i<=ps.length;i++) {  if (ps[i].className == 'a') {	ps[i].style.display = 'block';  }}var divs = document.getElementsByTagName("div");for(i=0;i<=divs.length;i++) {  if (divs[i].className == 'b') {	divs[i].style.display = 'none';  }}// --></script>[code]Although if u just did something like [code]VAR elements = etc etc

Then it should be fine. As you are defining it now, Javascript says its a constant to be used EVERYWHERE in your javascript file

[Err]

Sorry about the long wait for me to reply. I can't get access to my control panel /ftp to my site 'cause the servers are down right now. I tried to wait it out so I can show you guys a live example but I just said forget it.I tried it your way scott but it didn't work for me, It shows both class a AND b, however if I turn javascript off only class b shows. Same thing goes for Jhecht's example code; I couldn't get yours to work either. I also get a script error with both codes I tried on IE that says: " 'ps[...].className' is null or not an object" :)Here's the code full code I'm working with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>  <title>Test Page</title>  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  <meta name="robots" content="noindex, nofollow" />  <style type="text/css">.a {  display: none;}.b {  display: block;}</style></head><body><p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam  erat volutpat.</p><div class="b">Dummy Text, Dummy Text</div><script type="text/javascript"><!--var ps = document.getElementsByTagName("p");for(i=0;i<=ps.length;i++) {  if (ps[i].className == 'a') {	ps[i].style.display = 'block';  }}var divs = document.getElementsByTagName("div");for(i=0;i<=divs.length;i++) {  if (divs[i].className == 'b') {	divs[i].style.display = 'none';  }}// --></script></html></body>

Update// Here's the link: [removed]Thanks for the help so far, I'm really appreciating it.

Edited November 12, 2009 by RahXephon

[jhecht]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Test Page</title><script type="text/javascript">function changeVar(elementName,className,styleType){ var element = document.getElementsByTagName(elementName); for (x in element){  if(element[x].getAttribute("class")==className){   element[x].style.display=styleType;  } }}</script></head><body><a href="java script:changeVar('p','a','none');">Change</a><br/>the first variable is the element to be looked at, the second is the class name to be checked, and the third is the display if the class name matches the given one. you can use it in the body with an onload call.<br/><a href="java script:changeVar('p','a','block');">Change</a><br/>This function works fine for me..<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquamerat volutpat.</p><div class="b">Dummy Text, Dummy Text</div></body></html>

[Err]

I see. The only way I see that working is to put it on my body onload and calling it like that (just like you said). However my hands are tied there. You see, I'm using PHP includes on my pages for my body tags, so all my pages get the same body tags with all the same onloads (for my other scripts)... the thing is, I only need to place this script on one page not on all of them. It would be very unnecessary to add another onload function to all my pages because of that. From what I understand about javascript, I can also call the onload function from within the script itself, however that only renders all my other onload functions on my body tag useless (basically all my scripts stop working). Is there another way I can use this to where this process is automatically done by the browser instead of user interaction and/or onload functions?If not, is there a way I can get the previous script working together without any problems?Thanks, you're helping me understand js a little better now.

[jhecht]

you could just go :

//Other javascript here ...changeVar function defined here...changeVar('p','a','none');changeVar('div','b','block');//Other javascript

[Err]

I could just add it to the script like this:

<script type="text/javascript"><!--function changeVar(elementName,className,styleType) {  var element = document.getElementsByTagName(elementName);  for (x in element) {	if(element[x].getAttribute("class")==className) {	  element[x].style.display=styleType;	}  }}changeVar('p','a','block');changeVar('div','b','none');// --></script>

Right? or does it go into the script a different way? If it is, I have tested it out... it works half way. It drops the class "a" when javascript disabled but both class "a" and "b" stay blocked when js enabled. I wish I could say the same thing about IE (7.0) where it doesn't work at all. I also get script errors on IE.Teh link: [removed]

Edited November 12, 2009 by RahXephon

[Err]

*bump*

[Err]

anyone?*bump*

[Chocolate570]

Stop bumping if you like your nose where it is right now :)So you're saying it's not working? Well, I'm not sure if javascript 1.5-1.6 support the for(x in blah). Try this?

<script type="text/javascript"><!--function changeVar(elementName,classname,styleType) {  var element = document.getElementsByTagName(elementName);  for (x=0;x<element.length;x++) {	if(element[x].className==classname) {	  element[x].style.display=styleType;	}  }}changeVar('p','a','block');changeVar('div','b','none');// --></script>

Try that?

[jhecht]

Every version of javascript i've ever used allows for the for(x in blah) kind of thing.And Rah, if you must call it in the body tag of your page.<body onload="changeVar('div','b','block');changeVar('p','a','none')">

[Chocolate570]

Shoot, javascript 1.5 allows that? Darnit! I can't believe that! I've put at least 1000 lines of extra codes over the last year trying to allow for that... argh.