CSS-Stil wird nicht mit JavaScript wiederhergestellt - JavaScript, CSS

Ich versuche, eine CSS-Eigenschaft mit JavaScript abhängig von ihrem Wert vor und zurück zu setzen.

Der Klassenname menu ist so eingestellt, dass sie beim Laden der Seite ausgeblendet wird. Wenn ich die Funktion aufrufe, um sie sichtbar zu machen, ist sie erfolgreich. Wenn ich es jedoch erneut aufrufe, um es wieder zu ändern, wird es nicht ausgeblendet. Es wird als immer sichtbar angesehen.

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.
}

Ich bin verwirrt, warum es das erste tun kann, aber nicht das zweite. Ich habe versucht mit einem else if Bedingung:

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

Ich habe auch versucht, die setAttribute Methode, aber es ist immer das gleiche Ergebnis.

Ich muss in der Lage sein, hin und her zu wechseln.

Antworten:

In JavaScript mit = Sie weisen etwas einen Wert zu, ABER wenn Sie verwenden == Sie prüfen, ob etwas mit etwas anderem übereinstimmt.

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.
}

Bitte verwenden sie unter zustand

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

Ihre Bedingung ist nicht gültig. Sie setzen den Wert tatsächlich in der if-Anweisung.

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

Es sollte das sein:

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

Dieser Code schaltet die Sichtbarkeit eines Div auf Ihrer Seite um.

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>

Der Fehler liegt in Ihrer if-Anweisung. Also, wenn Sie die einfache Gleichheit in ein doppeltes Gleichheitszeichen ändern: ==sollte Ihr Code funktionieren:

mögen:

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

Ihre Syntax für den Vergleich ist falsch == Wenn Sie ein Feld in Javascript vergleichen, tun Sie Folgendes:

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.
}