Bene, ho visto il problema... ora, personalmente l'ho notato subito ma c'è da dire che non è così banale; potrebbe ingannare anche i meno principianti.
Si tratta di una questione relativa alla logica di funzionamento dei CSS e di come questi siano applicabili nei differenti modi sugli elementi del DOM (elementi HTML della pagina).
Cerco di darti un'infarinatura per spiegare dove sta il problema. Partiamo da una guida di riferimento: questa (purtroppo non c'è in italiano)
In sostanza ci dice che la proprietà style (in JavaScript) rappresenta solo ciò che è dichiarato attraverso l'attributo style di un dato elemento DOM; ma non necessariamente coincide col CSS che invece viene calcolato per tale elemento.
Il CSS calcolato, infatti, può essere fornito attraverso il metodo window.getComputedStyle() che restituisce il valore effettivo delle proprietà CSS dopo la loro applicazione su un dato elemento.
Infatti, prendendo il tuo esempio, per l'elemento #nascosto non è stato dichiarato il css attraverso l'attributo style, cioè specificandolo direttamente sul relativo tag, ma è applicato attraverso le regole incluse in head nell'elemento style.
Per questo motivo, sul tuo script, la prima volta la proprietà divhide.style.display avrà un valore non inizializzato (in realtà sarà una stringa vuota) quindi la condizione divhide.style.display == 'none' viene sfalsata, anche se di fatto l'elemento ha display:none (ma si tratta del valore calcolato e non quello dichiarato sull'attributo style).
Spero sia chiaro.
Puoi risolvere in vari modi a seconda di ciò che ti serve fare. Ora, capisco che il tuo scopo è puramente didattico per cui il mio consiglio è di dichiarare semplicemente la proprietà style sul tag, in questo modo:
codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Prova</title>
<style>
div#nascosto {display: none;} /* questo chiaramente non serve se dichiari l'attributo sul tag*/
</style>
<script>
function mostranascondi(id) {
var divhide = document.getElementById(id);
divhide.style.display = divhide.style.display == 'none' ? 'block' : 'none';
}
function cambiasegno(id) {
var segnodac = document.getElementById(id);
segnodac.innerHTML = segnodac.innerHTML == '+' ? '-' : '+';
}
</script>
</head>
<body>
<div id="tasto" onclick="mostranascondi('nascosto'), cambiasegno('tasto')">+</div>
<div id="nascosto" style="display: none;">Testo Nascosto</div>
</body>
</html>
A parte l'attributo style ho fatto anche qualche piccola modifica per ottimizzare il codice, ma lascio a te il compito di approfondire sulla tecnica usata.
Giusto per puntualizzare, tieni conto che, in una situazione del genere, personalmente risolverei col solo uso dei CSS senza JavaScript.
Un esempio:
codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Prova</title>
<style>
#tasto+label{
display: block;
width: 20px;
heigth: 20px;
line-height: 20px;
text-align: center;
background: silver;
cursor: pointer;
}
#tasto,#nascosto{ display: none; }
#tasto+label:after{ content:"+"; }
#tasto:checked+label:after{ content:"-"; }
#tasto:checked~#nascosto{ display: block; }
</style>
</head>
<body>
<input id="tasto" type="checkbox"><label for="tasto"></label>
<div id="nascosto">Testo Nascosto</div>
</body>
</html>
Anche qui lascio a te il compito di capirne il funzionamento.
Chiaramente non vorrei sviarti dallo studio di JavaScript ma è giusto anche apprendere che spesso è possibile eseguire analoghe funzioni con diverse tecniche. Questo è uno di quei casi.
Rispondi quotando
ho provato anche a controllare la console su chrome ma non dà nessun errore.
