Più funzioni richiamate con lo stesso onclick?

**zyro** · 16-08-2013, 13.13.45

Ciao a tutti, volevo un chiarimento da parte vostra.

Il mio intento è quello di creare due div diversi (chiamiamoli "pippo" e "pluto") che abbiano al caricamento un display impostato su "none" e che poi alternativamente possano essere resi visibili cliccando su un pulsante a loro assegnato (quindi se si vede pippo, pluto sarà invisibile, mentre se vogliamo vedere pluto diventerà invisibile pippo).
Per fare ciò ho modificato un codice javascript utile a far comparire e scomparire determinati elementi selezionati tramite "id" e il codice così come l'ho inserito funziona perfettamente:

Codice HTML:

<html>
<head>
<script language="javascript" type="text/javascript">
function selezione1(id) {
	if (document.getElementById) {
		document.getElementById("pippo").style.display="block" ;
		document.getElementById("pluto").style.display="none" ;
	}
}
function selezione2(id) {
	if (document.getElementById) {
		document.getElementById("pluto").style.display="block" ;
		document.getElementById("pippo").style.display="none" ;
	}
}
</script>
</head>

<body>
  <div id="pippo" style="display:none">Questo è il div di Pippo</div>
  <div id="pluto" style="display:none">Questo è il div di Pluto</div>
  <p><a href="#" onclick="selezione1 ();">Mostra Pippo e nascondi Pluto</a></p>
  <p><a href="#" onclick="selezione2 ();">Mostra Pluto e nascondi Pippo</a></p>
</body>
</html>

Il punto è il seguente:
così come ho impostato il codice è personalizzato solo per questi due elementi, mentre io vorrei fare in modo di poterlo riutilizzare n volte che voglio.
L'intento era quello di creare queste due funzioni nell'head:

Codice HTML:

<script language="javascript" type="text/javascript">
function selezione1(id) {
	if (document.getElementById) {
		document.getElementById(id).style.display="block";
	}
}
function selezione2(id) {
	if (document.getElementById) {
		document.getElementById(id).style.display="none" ;
	}
}
</script>

per poi richiamarle entrambe in ogni link specificando gli id desiderati.

Il punto è questo, come posso richiamare più funzioni nello stesso link e utilizzando lo stesso onclick?

16-08-2013, 15.32.37

Ciao zyro, per fare quello che chiedi il modo migliore è usare jquery (rapidissimo da includere nelle tue pagine) e in particolare la funzione toggle: http://api.jquery.com/toggle/

**zyro** · 16-08-2013, 16.07.50

Grazie per la risposta helpcode, toggle è una buona alternativa a quello che ho già fatto (tra l'altro aggiungendo la libreria forse dovrebbe leggermelo anche in explorer giusto?), ma la mia domanda rimane sempre la stessa:
voglio realizzare una funzione che mi permetta di rendere visibile un div e invisibile un altro in base al pulsante selezionato e che possa riutilizzare n volte nel caso abbia nella stessa pagina più situazioni simili (in modo da evitare di dover ricopiare lo stesso codice più e più volte editando le parti necessarie, col rischio di commettere errori).

16-08-2013, 16.42.56

Ciao, potrebbe esserti utile una di queste soluzioni?

http://jsbin.com/erejob/4/edit

http://jsbin.com/amokum/1/edit

http://jsbin.com/icezos/1/edit

Ognuna delle tre fa quello che chiedi (se ho capito bene), ma ha un funzionamento diverso, ognuno con dei pro e dei contro.

**dementialsite** · 16-08-2013, 22.07.18

Se non vuoi usare JQuery o altri framework, puoi benissimo concatenare le due funzioni dentro l'onclick:

Codice HTML:

  <p><a href="#" onclick="selezione1('pippo');selezione2('pluto');">Mostra Pippo e nascondi Pluto</a></p>
  <p><a href="#" onclick="selezione1('pluto');selezione2('pippo');">Mostra Pluto e nascondi Pippo</a></p>

In questo caso non dovresti avere problemi, ma tieni conto che l'esecuzione delle funzioni è sequenziale e che gli effetti della prima potrebbero comportare conseguenze sulla seconda...

Stammi bene...

**zyro** · 17-08-2013, 10.34.48

Ho notato che con jquery in effetti, caricando le librerie, ie è costretto a leggere bene le funzioni inserite, il che è un bene perché col solo js avrei avuto poca interattivitaà con quel browser.
Eventualmente come potrei impostare una funzione del genere in jquery, toggle ho notato non fa altro che far girare le funzioni una dietro l'altra sullo stesso pulsante, ma io ho bisogno che entrambe le funzioni vengano attivate allo stesso tempo e naturalmente una volta sola.

17-08-2013, 13.54.24

Con jquery puoi riassumere il tutto (senza funzioni) nel onclick:

Codice HTML:

<a onclick="$('#idPrimoDiv').hide(), $('#idSecondoDiv').show()">PrimoLink</a>
<a onclick="$('#idPrimoDiv').show(), $('#idSecondoDiv').hide()">SecondoLink</a>

Comunque sia ti consiglio di guardare quei codici che ti ho postato nel mio post precedente...sono tutte alternative molto valide che secondo me fanno al caso tuo. Inoltre le si possono sempre "tradurre" con jQuery. Fammi sapere!

**zyro** · 17-08-2013, 14.19.35

Ciao Helpcode, le funzioni che hai scritto prima sono senz'altro valide, ma non fanno altro che cambiare lo stato di una selezione cliccando sul medesimo pulsante, quello che serve a me è diverso.
Cerco di spiegarmi con un esempio pratico: voglio creare un form mail per ricevere informazioni da parti di utenti che lo compilano, ma le iformazioni devono essere personalizzate. Diciamo che all prima domanda del form ti chiedo che squadra tifi e ti do le varie opzioni, poi, in base alla scelta che hai fatto (tipo se hai selezionato Juve, anziché Milan o Inter), ti faccio uscire un elenco dei giocatori della squadra scelta per proseguire con il form. Naturalmente la scelta di una lista esclude tutte le altre e in tal modo cliccando su un pulsante devo fare in modo che una sola lista venga scoperta e le altre no, ma se poi cambiano idea devo far sì che cliccando su un'altra squadra scompaia l'elenco della prima squadra e compaia quello della seconda.
Questo era un banale esempio ma spero di aver reso bene l'idea. Le funzioni che mi hai consigliato tu agiscono sullo stesso pulsante e potrei far comparire più liste contemporaneamente, cosa che non deve accadere.

Comunque ho provato a esportare il tutto in jquery (non ho mai smanettato con questo linguaggio, quindi potrebbe esserci un modo più semplice rispetto a come l'ho scritto io)
Ecco il codice come l'ho esportato:

Codice HTML:

<html>
<head>
<script language="javascript" type="text/javascript">
$(document).ready (function() {
	$("#pippo, #pluto").hide();
	
	 $("#alfa").click(function(){
		 $("#pippo").fadeIn("fast");
		 }),
	 $("#alfa").click(function(){
		 $("#pluto").fadeOut("fast");
		 });
	
	 $("#beta").click(function(){
		 $("#pluto").fadeIn("fast");
		 }),
	 $("#beta").click(function(){
		 $("#pippo").fadeOut("fast");
		 });
   });
</script>
</head>
<body>
<div style="width:400px; height: 200px; background-color:#09F; margin:auto; padding: 50px">
  <div id="pippo" style="height:100px; background-color:#3F0">Io sono un concorrente</div>
  <div id="pluto" style="height:100px; background-color:#FF0">Io non partecipo a nessun ocncorso</div>
  <p id="alfa"><a href="#">Sono un concorrente</a></p>
  <p id="beta"><a href="#">Sono un nuovo utente</a></p>
</div>
</body>
</html>

L'effetto però non mi piace molto, perché per un po' fa vedere entrambi i div insieme.

Qualche modifica o consiglio in merito?

Edit: aspetta, ho appena usato l'ultimo tuo codice Helpcode, semplice come efficace, è la trasposizione in jquery di quello che mi serviva. Però non funziona in ie, come posso fare per farlo funzionare anche su explorer?

17-08-2013, 14.24.32

Risolvi così: http://jsbin.com/uZiPAfo/1/edit

In questo modo la funzione fadeIn viene eseguita solo DOPO che fadeOut è terminata.

**zyro** · 17-08-2013, 14.43.56

Originalmente inviato da helpcode

Risolvi così: http://jsbin.com/uZiPAfo/1/edit

In questo modo la funzione fadeIn viene eseguita solo DOPO che fadeOut è terminata.

Great friend, i love you soo much for this! (in senso figurato

)

Un'ultima domanda legata sempre a quell'adorabile Ie.

Perché se esporto il tuo link su Ie mi funge tutto, mentre se esporto solo il codice nella mia pagina no?
Può essere legato alla versione di jquery? Io ho la 1.9.0

17-08-2013, 14.48.08

Controlla la documentazione di fadeIn e fadeOut in merito alla compatibilità di IE.
Che versione di IE stai usando?

E comunque, lascia perdere InternetExplorer!! :) I browser DECENTI per un web ALL'AVANGUARDIA sono Chrome e Firefox e Safari. Iniziamo tutti quanti a dimenticarci IE. I loro utenti prima o poi capiranno e cambieranno browser: FINALMENTE!

**zyro** · 17-08-2013, 15.16.21

Credo di avere installata la versione 9, ma tanto la uso solo per verificare se ci sono incompatibilità di script, di solito navigo con Chrome e in alcuni casi con firefox. Ie l'ho abbandonato nel momento steso in cui ho attaccato la mia prima connessione internet, tant'è che quando faccio un sito metto un link con una finestrella in cui inserisco le varie incompatibilità con questo o quel browser se ci sono e con ie ci sono sempre.
In questo caso però non si tratta di pura navigazione o bellezza del sito, devo realizzare un form che non mi crei problemi con nessun utente (anche quelli di ie).

17-08-2013, 15.20.18

Sei sicuro di includere bene jquery? Controlla la console per vedere quali errori si scatenano.

**zyro** · 17-08-2013, 17.21.52

Sì sì, il percorso è corretto, anche perché uso un programma anche grafico che mi permette di incorporare css e cms semplicemente trascinandoli nel file, quindi sotto quel punto di vista non posso sbagliare neanche volendo.
Devo provare a scaricare l'ultima versione per vedere se è lì il problema, ancora sulla versione 9 del browser alcune funzionalità del jquery 1.9.0 sono state cancellate.

Ti faccio sapere appena potrò verificare.

Discussione: Più funzioni richiamate con lo stesso onclick?

LinkBack

Strumenti discussione

Display

Più funzioni richiamate con lo stesso onclick?

Regole di scrittura