Sequenza Bottoni

[Kierke90]

Salve, innanzitutto spero di aver postato nel modo giusto e nel reparto giusto (essendo nuovo...:P)

Ho un problema che spero qualcuno di voi riesca a risolvere. Forse per mia incapacità o per mia ignoranza, ma non riesco a trovare una soluzione.

In una pagina Html, cerco di mettere diversi bottoni. Lo scopo di ogni bottone dev'essere che quando ci clicco, mi deve mostrare il suo contenuto.

1)Esempio: ho 1 bottone chiamato come

BOTTONE 1


Quando ci clicco sopra, mi mostra il suo contenuto; cliccandoci nuovamente, scompare tutto ovviamente.


2)Esempio: ho 2 bottoni, che chiamerò

BOTTONE 1

BOTTONE 2

Cliccando il BOTTONE 1, si apre, mentre il BOTTONE 2, presenterà il tastino, ma non darà segni di vita.

Vi copio il codice di prova usato. Vi accorgerete che copiando lo stesso codice, i risultati saranno alterati, come da me descritti.


<center><script>
window.onload=function(){

var event = document.getElementById("event");
event.onclick=function(){
var event = document.getElementById("event");
var content = document.getElementById("contenuto");
if(content.style.display == "none") {
content.style.display = "";
event.innerHTML = "Nascondi";
}
else {
content.style.display = "none";
event.innerHTML = "Mostra";
}
}
}
</script>
<button id="event">Mostra</button>

<div id="contenuto" style="display:none">
blablabla</center>


In questo formato va bene, ma se voglio ripetere l'operazione copiando a capo l'intero codice, mi escono comunque i due pulsanti, ma il secondo ( e quindi anche il 3, il 4, il 5 e via dicendo) non darà segno di vita.

Vi sono debitore *-*

Volendo potreste usare come prova anche il Real Time html editor
LINK

[picouli]

Ciao! Sei sicuro per ogni bottone addizionale di cambiare l'ID? Ricorda che l'ID di ogni elemento HTML deve essere univoco in una pagina. Forse potresti usare una classe per individuare i bottoni - e magari con un po' di jQuery la cosa diventa anche più semplice...

[Kierke90]

Potresti mostrarmi come cambiare l'ID ? Sarebbe quello con scritto event ? Speravo in una correzione e in un ri post del codice corretto.

Il jQuery non ho la più pallida idea di cosa sia

[picouli]

L'ID di ogni div è quell'identificatore "event" e "contenuto" che hai nella forma

<button id="event">Mostra</button>

e

<div id="contenuto" style="display:none">

e deve essere univoco per ogni elemento della pagina.

Potresti fare

<button id="event1">Mostra</button>
<button id="event2">Mostra</button>
<button id="event3">Mostra</button>

e ovviamente devi cambiare anche il codice (replicandolo per ogni elemento)

[Vincent.Zeno]

@picouli, hai un pvt

[Kierke90]

L'ID di ogni div è quell'identificatore "event" e "contenuto" che hai nella forma

<button id="event">Mostra</button>

e

<div id="contenuto" style="display:none">

e deve essere univoco per ogni elemento della pagina.

Potresti fare

<button id="event1">Mostra</button>
<button id="event2">Mostra</button>
<button id="event3">Mostra</button>

e ovviamente devi cambiare anche il codice (replicandolo per ogni elemento)

Ma devo modificare tutte le parole event per ogni codice ?

Non potresti farmi un esempio con 2 pulsanti differenti che aprono 2 descrizioni differenti ?

Perchè a me continua a non fungere e non capisco cosa possa essere x/

[picouli]

Prova così:

<script>window.onload=function(){
	var content1 = document.getElementById("contenuto1");	var event1 = document.getElementById("event1");	event1.onclick=function(){		if(content1.style.display == "none") {			content1.style.display = "";			event1.innerHTML = "Nascondi";		}		else {			content1.style.display = "none";			event1.innerHTML = "Mostra";		}	}
	var content2 = document.getElementById("contenuto2");	var event2 = document.getElementById("event2");	event2.onclick=function(){		if(content2.style.display == "none") {			content2.style.display = "";			event2.innerHTML = "Nascondi";		}		else {			content2.style.display = "none";			event2.innerHTML = "Mostra";		}	}

}</script>
<button id="event1">Mostra</button><div id="contenuto1" style="display:none">blablabla</div>
<button id="event1">Mostra</button><div id="contenuto1" style="display:none">blablabla</div>

Ovviamente avrebbe molto più senso farlo con gli array e, per l'appunto, con jQuery (cerca su Google che cosa è) ma l'idea è quella che ti ho scritto

[Kierke90]

Ovviamente avrebbe molto più senso farlo con gli array e, per l'appunto, con jQuery (cerca su Google che cosa è) ma l'idea è quella che ti ho scritto

Allora, ho provato con il tuo codice, e mi genera 2 tastini. Per l'appunto il primo funziona e il secondo no. Il problema di fondo sono queste interferenze con gli event e i contenuto. Dunque questo implica che i primo pulsante si apre normalmente, il secondo invece NO. :/

Eppure al primo pulsante ho impostato event e contenuto 1
al secondo ho impostato event e contenuto 2.

A te funziona ? Potresti provarlo su questo sito Editor

Fammi sapere, io sto tentando da prima di risolvere e ancora non riesco >

[picouli]

Scusa non puoi mettere tu online il codice che hai così vediamo dove potrebbe essere il problema?

[Kierke90]

PERFETTO, avevo commesso un errore di battitura ma per fortuna me ne sono accorto.

Ora funzionano più che mai.

Grazie 1000. Si può chiudere la discussione