codice js che non funziona al primo clik

[Mugiwara88]

Premetto che sono nuovo al linguaggio JavaScript, detto questo non capisco perchè non esegue una riga del codice seguente: (sono in file separati).
Inoltre non capisco perchè al primo click non succede nulla, mentre dal secondo in avanti funziona correttamente.

function Start(){
	document.getElementById('a').style.display = "none";
	document.getElementById('b').style.display = "none";
	document.getElementById('c').style.display = "none";
	document.getElementById('d').style.display = "none";
	document.getElementById('e').style.display = "none";
}

function prova(z){
	if(document.getElementById(z).style.display == "none")
	{
		Start();
		document.getElementById(z).style.display = "block";
		document.getElementById(w).getElementByTagName('img').style.width = "50";               // la riga che non esegue è questa
	}
	else
	{
		Start();
	}
}

di seguito il codice html interessato:

	<div id="w">
		<ul>
			<li><a onclick="return prova('a')"><img src="img.jpg"></a></li>
			<li><a onclick="return prova('b')"><img src="img.jpg"></a></li>
			<li><a onclick="return prova('c')"><img src="img.jpg"></a></li>
			<li><a onclick="return prova('d')"><img src="img.jpg"></a></li>
			<li><a onclick="return prova('e')"><img src="img.jpg"></a></li>
		</ul>
	</div>
	<br>
    <div id="w1">
		<ul id="a">
			<li><a href="#"><img src="img.jpg"></a></li>
			<li><a href="#"><img src="img.jpg"></a></li>
			<li><a href="#"><img src="img.jpg"></a></li>
		</ul>
		<ul id="b">
			<li><a href="#"><img src="img.jpg"></a></li>
			<li><a href="#"><img src="img.jpg"></a></li>
			<li><a href="#"><img src="img.jpg"></a></li>
		</ul>
		<ul id="c">
			<li><a href="#"><img src="img.jpg"></a></li>
			<li><a href="#"><img src="img.jpg"></a></li>
			<li><a href="#"><img src="img.jpg"></a></li>
		</ul>
		<ul id="d">
			<li><a href="#"><img src="img.jpg"></a></li>
			<li><a href="#"><img src="img.jpg"></a></li>
			<li><a href="#"><img src="img.jpg"></a></li>
		</ul>
		<ul id="e">
			<li><a href="#"><img src="img.jpg"></a></li>
			<li><a href="#"><img src="img.jpg"></a></li>
			<li><a href="#"><img src="img.jpg"></a></li>
		</ul>
    </div>

Il CSS di base è questo:

li {list-style-type:none; cursor:pointer; }
a {text-decoration:none; color:black; }
img {width:150px; height:150px; border:0; }
#w1 ul {display:none; }

Grazie in anticipo dell'aiuto.

 

[Vale2]

Ciao,

funziona al secondo click perché al primo controlla lo stato della if if(document.getElementById(z).style.display == "none")

metti un onload per caricare subito la funzione.

Per il ridimensionamento width a 50Px getElementByTagName('img') getElementsByTagName no basta una ciclo e assegnare in id univoco a ogni immagine.

function prova(z){
	if(document.getElementById(z).style.display == "none")
	{
		Start();
		document.getElementById(z).style.display = "block";
		[B]for (j=1; j<16; j++){
                document.getElementById("im"+j).style.width = "50px";[/B]
       }  
	}else{
		Start();
	}
}
window.onload=Start;

	<div id="w">
		<ul>
			<li><a onclick="return prova('a')"><img src="img.jpg"></a></li>
			<li><a onclick="return prova('b')"><img src="img.jpg"></a></li>
			<li><a onclick="return prova('c')"><img src="img.jpg"></a></li>
			<li><a onclick="return prova('d')"><img src="img.jpg"></a></li>
			<li><a onclick="return prova('e')"><img src="img.jpg"></a></li>
		</ul>
	</div>
	<br>
    <div id="w1">
		<ul id="a">
			<li><a href="#"><img id="im1" src="img.jpg"></a></li>
			<li><a href="#"><img id="im2" src="img.jpg"></a></li>
			<li><a href="#"><img id="im3" src="img.jpg"></a></li>
		</ul>
		<ul id="b">
			<li><a href="#"><img id="im4" src="img.jpg"></a></li>
			<li><a href="#"><img id="im5" src="img.jpg"></a></li>
			<li><a href="#"><img id="im6" src="img.jpg"></a></li>
		</ul>
		<ul id="c">
			<li><a href="#"><img id="im7" src="img.jpg"></a></li>
			<li><a href="#"><img id="im8" src="img.jpg"></a></li>
			<li><a href="#"><img id="im9" src="img.jpg"></a></li>
		</ul>
		<ul id="d">
			<li><a href="#"><img id="im10" src="img.jpg"></a></li>
			<li><a href="#"><img id="im11" src="img.jpg"></a></li>
			<li><a href="#"><img id="im12" src="img.jpg"></a></li>
		</ul>
		<ul id="e">
			<li><a href="#"><img id="im13" src="img.jpg"></a></li>
			<li><a href="#"><img id="im14" src="img.jpg"></a></li>
			<li><a href="#"><img id="im15" src="img.jpg"></a></li>
		</ul>
    </div>

Valeria.

 

[Mugiwara88]

Grazie dei consigli, ma non è esattamente quello che volevo ottenere, in pratica vorrei che le immagini contenute nel div con id="w" si ridimensionassero (le stesse su cui clicco per aprire le altre contenute nel div con id="w1").
Hai qualche idea su come dovrei fare? grazie ancora dell'aiuto...

 

[Mugiwara88]

Mille grazie sei stata gentilissina...

Come non detto, ho risolto...grazie infinitamente dell'aiuto...