codice js che non funziona al primo clik

Mugiwara88

Nuovo Utente
5 Dic 2012
13
0
0
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.

Codice:
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:
HTML:
	<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:

HTML:
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.
 
Ultima modifica di un moderatore:

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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.


Codice:
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;


Codice:
	<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

Nuovo Utente
5 Dic 2012
13
0
0
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

Nuovo Utente
5 Dic 2012
13
0
0
Mille grazie sei stata gentilissina...

Come non detto, ho risolto...grazie infinitamente dell'aiuto...:)
 
Discussioni simili
Autore Titolo Forum Risposte Data
P Una controllatina al codice che non va bene.... Javascript 8
M Codice che non funziona Programmazione 0
S Codice asp convertito in js che non funziona Javascript 5
Shyson Codice che trova item casuali PHP 1
Shyson [WordPress] [PHP] Creare codice che evidenzia nuovi articoli WordPress 0
E [PHP] [HTML] Codice che gestisce l'input e la trasmissione dei dati alla mia email PHP 1
Shyson Codice che riconosce il proprio pc PHP 3
B Codice che disabilita la funzione di Copia Schermo? Javascript 1
P Box form che include codice php PHP 0
L programma che ottimizza e cancella codice inutli dalla pagine Windows e Software 0
M Esiste un codice che cripta il "link" immagine HTML e CSS 1
M Analisi sito per pulire codice inutile HTML e CSS 1
JeiMax Modifica codice php personalizzato PHP 2
R Dubbi su siti sviluppati con Wordpress e con codice WordPress 6
L tipo boolean non funzionante su mariadb (mysql). E codice php 7.4. PHP 0
L Php_aggiornamento codice PHP 3
Shyson Codice wp-login non funziona PHP 2
G Codice html Javascript 1
Shyson Modificare codice e creare link PHP 0
F Il codice php è giusto? PHP 2
napuleone Con le date il codice da di matto o forse non è così Javascript 6
napuleone visualizzare il codice senza usare gli & HTML e CSS 1
E Barra di avanzamento codice PHP PHP 4
R [c#] Proteggere il codice dell'applicazione C/C++ 0
D modificare questo codice per inserimento in text e non in tabella jQuery 1
L salvare codice html in mysql PHP 3
A eliminare caratteri diacritici con codice ascii PHP 4
M Controllo del codice fiscale/partita iva PHP 11
Z Difficoltà codice data PHP 0
I PROBLEMA CODICE INSERTION SORT C C/C++ 2
I PROBLEMA CODICE C - INSERTION SORT Presentati al Forum 1
L login con solo un codice PHP 3
M Lanciare alert se il codice fiscale è già presente nel db e lasciare la scelta di inserire all'utente PHP 42
R Modifica codice per l'upload di più file PHP 1
gandalf1959 ricercare porzioni di codice da sito gestito con WordPress WordPress 11
D verifica codice fiscale persona fisica /aziendale stesso campo HTML e CSS 1
A Aprire la window form Add Connection da codice Visual Basic 4
felino [Wordpress] Sito web con codice malevolo WordPress 7
M [PHP] Istruzione "echo" all'interno di codice html PHP 2
C Refresh parte di codice pagina php PHP 6
Shyson [PHP] Aggiungere link al codice PHP 0
felino Domini hackerati con codice malevolo Hosting 2
A come spedire SMS da codice PHP con mdem USB PHP 0
M [PHP] Come inserire codice html in un ciclo while PHP 2
G Eseguire codice solo al termine della chiamata ajax Ajax 1
X [Apache] Creare sito clone/preservare codice sorgente Apache 7
felino [Dominio] File con permessi 444 e codice malevolo Domini 3
Shyson [PHP] Codice iscrizione e invio avviso nuovi articoli PHP 3
elpirata Implementare Copy to clipboard in codice html HTML e CSS 1
L [PHP] Problema su codice o server PHP 5

Discussioni simili