Hide class

Vraith · 10-28-2012, 10:44 AM

Hello

My assignment is to find all <p> and hide the ones that are <p class="show"> using a For Loop. "show" is supposed to be hidden when loading the page, because im gonna do a < a > that is gonna show them. This is what i have done, and it doesnt work. Did i do something wrong or am i way off here ?

windows.onload = prepareShow;
function prepareShow(){
var fan = document.getElementsByClassName("show");
for (var i = 0; i < fan.length; i++){
if (fan[i].getAttribute("class")=="show"){
fan[i].style.display="none";}
}
}

sunfighter · 10-29-2012, 12:47 AM

Can be done a few ways but :

Code:

<html>
<head>
<style type="text/css">
.show{
	display: none;
}
</style>
</head>
<body>
<p class="show">bill</p>
<p class="abit">See</p>
<p class="show">dick</p>
<p class="abit">Me</p>
<p class="show">jane</p>
<p class="abit">Run</p>
<button onclick="LetsSee()">Behold</button>

<script type="text/javascript">
function LetsSee()
{
	var x = document.getElementsByClassName("show").length;
	for(i = 0; i < x; i++ ){
	var fan = document.getElementsByClassName("show")[i].style.display = 'block';
	}
}
</script>
</body>
</html>

felgall · 10-29-2012, 02:16 AM

You can make the code a lot shorter than that:

Code:

function LetsSee()
{
	var x = document.getElementsByClassName("show");
	for(i = x.length-1; i >0 0; i-- ){
	x[i].style.display = 'block';
	}
}

rnd me · 10-29-2012, 06:46 AM

Quote:

Originally Posted by felgall

You can make the code a lot shorter than that:

Code:

function LetsSee()
{
	var x = document.getElementsByClassName("show");
	for(i = x.length-1; i >0 0; i-- ){
	x[i].style.display = 'block';
	}
}

You can make the code a lot shorter than that, (and re-usable):

Code:

function LetsSee(c,s,r){r=(r||document).getElementsByClassName(c);
 for(c in x)(x[c].style||0).display=s}

usage: LetsSee(classToHit , displayStyleToSet, opt_elmRoot );

ex (do what the previous codes do):

Code:

LetsSee("show","block");

felgall · 10-29-2012, 07:34 PM

Quote:

Originally Posted by rnd me

Code:

function LetsSee(c,s,r){r=(r||document).getElementsByClassName(c);
 for(c in x)(x[c].style||0).display=s}

Shouldn't that be

Code:

function LetsSee(c,s,r){x=(r||document).getElementsByClassName(c);
 for(c in x)(x[c].style||0).display=s}