Lo stile CSS non viene ripristinato utilizzando JavaScript - javascript, css

Sto cercando di impostare una proprietà CSS avanti e indietro utilizzando JavaScript a seconda del suo valore.

Il nome della classe menu è impostato per essere nascosto al caricamento della pagina. Quando chiamo la funzione per impostarla su visibile, ha successo. Tuttavia, quando lo chiamo di nuovo per cambiarlo, non viene impostato su nascosto. Viene visualizzato come sempre impostato su visibile.

let menu = document.querySelector(".menu");
if (menu.style.visibility = "hidden") {
menu.style.visibility = "visible";
console.log("visible"); // always shows this.
} else {
menu.style.visibility = "hidden";
console.log("hidden"); // doesn"t get to here when .menu is visible.
}

Sono confuso sul perché possa fare il primo ma non il secondo. Ho provato a usare a else if condizione:

else if (menu.style.visibility = "visible")

Ho anche provato a usare il setAttribute ma è sempre lo stesso risultato.

Devo essere in grado di passare avanti e indietro.

risposte:

In JavaScript utilizzando = assegni un valore a qualcosa MA se lo usi == stai verificando se qualcosa è uguale a qualcos'altro.

let menu = document.querySelector(".menu");
if (menu.style.visibility == "hidden") {
menu.style.visibility = "visible";
console.log("visible"); // always shows this.
} else {
menu.style.visibility = "hidden";
console.log("hidden"); // doesn"t get to here when .menu is visible.
}

Si prega di utilizzare sotto le condizioni

if (menu.style.visibility == "hidden") //change ==

Il tuo condizionale non è "t valido. Stai effettivamente impostando il valore nell'istruzione if.

if (menu.style.visibility = "hidden") // this sets the value

Dovrebbe essere questo:

if (menu.style.visibility == "hidden") // this compares the value

Questo codice attiva la visibilità di un div sulla tua pagina.

function togglediv() {
var div = document.getElementById("menu");
div.style.display = div.style.display == "none" ? "block" : "none";
}

<button onclick="togglediv("menu")">Toggle div</button>
<div id="menu">div</div>

L'errore è nell'istruzione if. Quindi, se si modifica l'uguaglianza singola in un doppio segno di uguale: ==, il tuo codice dovrebbe funzionare:

piace:

if (menu.style.visibility == "hidden")

La tua sintassi per il confronto è sbagliata che devi usare == confrontando qualsiasi campo in javascript, quindi basta:

if (menu.style.visibility == "hidden") {
menu.style.visibility = "visible";
console.log("visible"); // always shows this.
} else {
menu.style.visibility == "hidden";
console.log("hidden"); // doesn"t get to here when .menu is visible.
}