[JS]Oggetto che compare/scompare ad un click

Oggi vedremo, con questo breve e semplice HowTo, come creare un bottone relativo alla manipolazione di un div; più specificatamente di come farlo apparire e scomparire.
Cominciamo subito con il creare il pulsante

Codice:

---

<!-- Se lo volete a mò di link -->
<a href="#" onClick="azione('nomediv');">Pulsante</a>
<!-- Se lo volete come immagine -->
<img src="miaimg.jpg" onClick="azione('nomediv');" />
<!-- Se lo volete come pulsante di form -->
<input type="button" value="Pulsante" onClick="azione('nomediv');">

---

Ora procediamo con il JAVASCRIPT.
Nota:
onClick="azione('nomediv');" è l'evento(onclick) che farà partire la funzione(azione) con i relativi valori ('nomediv')

Codice:

---

<script>
//Dichiaro la funzione
function azione(variabile) {
if(document.getElementById(variabile).style.display=='') {
document.getElementById(variabile).style.display='none';
}else{
document.getElementById(variabile).style.display='';
}
</script>

---

Ora creiamo il livello (ma può essere qualsiasi cosa, basta che abbia come id "nomediv").

Codice:

---

<div id="nomediv">Ciao, questo testo scomparirà!</div>

---

Alla pressione del pulsante il testo scomparirà/apparirà.
Ecco il codice completo!

Codice:

---

<script>
//Dichiaro la funzione
function azione(variabile) {
if(document.getElementById(variabile).style.display=='') {
document.getElementById(variabile).style.display='none';
}else{
document.getElementById(variabile).style.display='';
}
</script>
<!-- Se lo volete a mò di link -->
<a href="#" onClick="azione('nomediv');">Pulsante</a>
<!-- Se lo volete come immagine -->
<img src="miaimg.jpg" onClick="azione('nomediv');" />
<!-- Se lo volete come pulsante di form -->
<input type="button" value="Pulsante" onClick="azione('nomediv');">
<div id="nomediv">Ciao, questo testo scomparirà!</div>

---

Potete anche usare le potenti funzioni setInterval e setTimeout per gestire gli intervalli di tempo.

Ecco come un oggetto compare/scompare ogni secondo:

Codice:

---

<script>
setInterval("azione('nomediv')",1000);
</script>
<div id='nomediv'>Livello che c'è e non c'è!</div>

---

Naturalmente la funzione azione è quella di prima, e non deve mancare nella nostra pagina, se non si vuole incorrere in errori!
setInterval(funzione,minisec) esegue ogni minisec la determinata funzione, mentre setTimeout(funzione,minisec) esegue la funzione DOPO minisec stabiliti.

Penso di essere stato abbastanza esaustivo su ciò che diceva il titolo, quindi vi dico: alla prossima! :wink: !