Warum funktioniert das nicht?
Das erste If funktioniert, aber das zweite nicht. Es geht um JavaScript.
let hamburger = document.getElementById("button");
let sidebar = document.getElementById("sidebar")
sidebar.style.right = "150px";
sidebar.style.position = "relative";
hamburger.addEventListener("click", function() {
if (sidebar.style.right = "150px") {
sidebar.style.left = "0"
} if(sidebar.style.left = "0") {
sidebar.style.right ="150px"
}
});
4 Antworten
Ein einfaches Gleichheitszeichen entspricht einer Zuweisung.
Beim ersten if weist du right also erst den Wert "150px" zu, danach wird geprüft, ob der Wert nicht falsy ist. Also beispielsweise null, 0 oder undefined (eine komplette Liste aller falsy-Werte findest du hier).
Das trifft in diesem Fall nicht zu, left bekommt den Wert "0".
Beim zweiten if weist du left den Wert "0" zu. Auch das ist kein falsy-Wert, also bekommt right den Wert "150px".
Wenn du Wertevergleiche durchführen möchtest (ob z.B. right den Wert "150px" hat), dann arbeite mit dem Vergleichsoperator.
if (sidebar.style.right == "150px") {
sidebar.style.left = "0";
}
if (sidebar.style.left == "0") {
sidebar.style.right ="150px";
}
Der einfache Vergleichsoperator (==) prüft typunabhängig. Wenn beide Terme nicht vom gleichen Typ sind, wird implizit eine Typkonversion versucht, um einen Vergleich möglich zu machen.
Der strikte Vergleichsoperator (===) prüft Wert und Typ. Wenn du beispielsweise versuchst, eine Zeichenkette mit einer Zahl zu vergleichen, bekommst du das Ergebnis unwahr / false, da beide Terme nicht vom gleichen Typ sind.
Mach auch bei der 0 ein px dahinter, dann wird es gehen
Du brauchsdt im if natürlich auch == und nicht nur = , so setzt du die Werte und vergleichst nicht
if (sidebar.style.right == "150px") {
sidebar.style.left = "0px"
} if(sidebar.style.left == "0px") {
sidebar.style.right ="150px"
}
Es scheint mir so, als würdest du falsch vergleichen. Normalerweise schreibst du:
xy == zy
Statt nur einem " = ".
Das zweite If funktioniert noch nicht, aber danke für die Information.
Wird es überhaupt ausgeführt? Probier mal mit der Konsole zu debuggen. Sprich console.log("Dieses if funktioniert") oder sowas
..und zu allem was bereits geschrieben wurde..
Ist "button", "sidebar" tatsächlich die "Id" oder eher der "type"
Ja, habe bisschen was geändert, jetzt funktioniert es.
Ist das selbe, weil 0 ist immer 0, egal welche Einheit.