Ciao
questo codice dovrebbe ottenere lo stesso risultato del tuo ma in modo un po' più semplice:
codice:
<html>
<head>
<style>
.quotecontent {
display: none;
}
</style>
<script type="text/javascript">
function mostra_nascondi(valore) {
if (valore == 'si') {
document.getElementById('quotecontent').style.display = "block"
} else {
document.getElementById('quotecontent').style.display = "none"
}
}
</script>
</head>
<body>
<div class="quotetitle">
<input type="radio" id="option_si" name="option" value="si" onclick="mostra_nascondi(this.value)"><label for="option_si">Sì</label>
<input type="radio" id="option_no" name="option" value="no" onclick="mostra_nascondi(this.value)"><label for="option_no">No</label>
</div>
<div class="quotecontent" id="quotecontent">
Testo che appare alla scelta di si
</div>
</body>
</html>
Come vedi invece di inserire tutti i comandi js nei tag ho preferito inserire solo la chiamata ad una funzione e poi sviluppare tutto il codice nella funzione. In questo modo si alleggeriscono i tag rendendo il tutto più leggibile e inoltre nella function è facile indentare il codice migliorando ancor più la leggibilità.
Ho poi cambiato il modo di individuare quale radio è cliccato assegnando ad ogni scelta un value che viene passato alla funzione con this.value. In questo modo la funzione può fare il test direttamente sui valori "si" e "no".
Per individuare un singolo elemento il modo migliore è di dargli un id (occhio che l'id DEVE essere univoco, nel tuo codice invece ce n'erano due uguali) e poi usare la document.getElementById.
Sempre per una questione di ordine ho tolto le due div nidificate che, per questa specifica esigenza, non servivano, e ho spostato lo style in head.
E infine ho assegnato delle <label> ai pulsanti perché così si migliora l'usabilità, infatti il radio viene selezionato non solo se si clicca sul pallino ma anche se si clicca sulla parola "Sì" o "No".
Se hai altre domande chiedi pure.
Buon anno.
Rispondi quotando
