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

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, JavaScript

27.10.2023, 13:14

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.

elmex7

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

27.10.2023, 12:49

Mach auch bei der 0 ein px dahinter, dann wird es gehen

Ramazan79

Fragesteller

27.10.2023, 12:50

Ist das selbe, weil 0 ist immer 0, egal welche Einheit.

elmex7

27.10.2023, 12:52

@Ramazan79

Du brauchsdt im if natürlich auch == und nicht nur = , so setzt du die Werte und vergleichst nicht

elmex7

27.10.2023, 12:53

@Ramazan79

if (sidebar.style.right == "150px") {
        sidebar.style.left = "0px"
    } if(sidebar.style.left == "0px") {
        sidebar.style.right ="150px"
    }

GuteFrageXY13

27.10.2023, 12:54

Es scheint mir so, als würdest du falsch vergleichen. Normalerweise schreibst du:

 xy == zy

Statt nur einem " = ".

Woher ich das weiß:Studium / Ausbildung – Fachzweig Betriebsinformatik an einer HTL

Ramazan79

Fragesteller

27.10.2023, 12:57

Das zweite If funktioniert noch nicht, aber danke für die Information.

GuteFrageXY13

27.10.2023, 12:59

@Ramazan79

Wird es überhaupt ausgeführt? Probier mal mit der Konsole zu debuggen. Sprich console.log("Dieses if funktioniert") oder sowas

IchMalWiederXY

27.10.2023, 17:44

..und zu allem was bereits geschrieben wurde..
Ist "button", "sidebar" tatsächlich die "Id" oder eher der "type"

Ramazan79

Fragesteller

27.10.2023, 17:53

Ja, habe bisschen was geändert, jetzt funktioniert es.

Ähnliche Fragen

Verstehe nicht, warum es falsch ist?

// loggen der Variabeln-Name für den Login-Button //

let loggen = document.getElementById("login");


loggen.addEventListener("click", function() {
  
// eingabeFeld ist der Name für das Inputfeld //  
let eingabeFeld = document.getElementById("field");

eingabeFeld.value;
if (eingabeFeld.includes("huso1234")) {
alert("Ja, das Passwort ist richtig");
}
else {
    alert("Das Passwort ist falsch");
}
eingabeFeld.textContent = "";
});

Funktioniert halt einfach nicht. Es handelt sich hierbei um die Programmiersprache JavaScript. Es kommt kein Alert und am Ende geht der Text auch nicht weg vom Inputfeld.

...zur Frage

Wo soll ich meine elemente in dem Javascript einfügen?

<script>
      document.addEventListener('DOMContentLoaded', function() {
          const scrollButtons = document.querySelectorAll('.button1');

          scrollButtons.forEach(button => {
              button.addEventListener('click', function() {
                  const target = button.getAttribute('data-target');
                  const targetElement = document.getElementById(target);

                  if (targetElement) {
                      window.scrollTo({
                          top: targetElement.offsetTop,
                          behavior: 'smooth'
                      });
                  }
              });
          });
      });
  </script>

Hi,

AI hat mir den code gegeben um meine buttons nützlich zu machen. Weil ich kein Javascript kann weiß ich nicht wo ich meine class namen einfügen soll.

Bitte helft mir

LG Lisa

...zur Frage

C-Knopf im Taschenrechner programmieren?

Ich habe vor, einen Taschenrechner in HTML und JS zu coden, aber ich weiß nicht, wie ich diesen Knopf, der alles löscht in eine Funktion packen kann.

So habe ich es bisher versucht, aber es funktioniert nicht:

function deleteAll() {
  let container = document.getElementById("resultarea");
  let remove = clrs(container.innerHTML);
  container.innerHTML = remove;
}

...zur Frage

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zur Frage

Warum wird meine Seite nicht aktualisiert?

Hallo,

ich wollte machen, dass, wenn ich in Python etwas sage, ein Div im HTML eingefügt wird. Das funktioniert auch ganz gut, aber, da ich kein Websockets verwende, muss ich die Seite immer manuell aktualisieren, wenn der Div eingefügt wurde, damit es ihn auch anzeigt. Diese Funktion wollte ich automatisieren, doch es funktioniert nicht, wieso?

// FLASK
function detectWakeWord() {
    var detectedWord = 'luna'; 
    
    if (detectedWord === 'luna') {
        if (!document.getElementById('luna_wake_word')) {
            var div = document.createElement('div');
            div.id = 'luna_wake_word';
            document.body.appendChild(div);
            showWakeWord();
            
            setTimeout(function() { 
                location.reload(); 
            }, 1000); 
        }
    }
}

detectWakeWord();

Freundliche Grüsse

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

Javascript Seitenübergreifend?

Hallo,

ich möchte in einen Html Code einen Javascript Code für Lesezeichen einfügen. Also ich habe eine Seite mit vielen Texten (Seite x), zu jedem Text gibt es einen Button, der das jeweilige Lesezeichen hinzufügen soll. Wenn dieser Knopf gedrückt wird, dann soll ein derzeit unsichtbarer Container (display: none;) auf display:flex; bzw. Sichtbar gestellt werden (in Seite y).

Der Code der diese Funktion ausführen soll wäre derzeit:

function textfield1() {

var x = document.getElementById("th1");

if (x.style.display === "none") {

x.style.display = "block";

} else {

x.style.display = "none";

}

Dieser Code wird natürlich nur auf Seite x ausgeführt
kann mir jemand helfen, dass dieser Container dann auf Seite y gezeigt wird?

...zur Frage

Javascript Button erstellen?

Hallo,

ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.

<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>

Aktueller Stand

...zur Frage

Bild in Bild auf iOS?

Ich versuche mich momentan etwas mit html und JavaScript und habe folgenden Code der auf dem pc perfekt funktioniert aber nicht auf meinem Handy, ich sah bei Apple einen Lösungsansatz aber dabei verstand ich nichts!

function togglePictureInPicture() {
  if (!document.pictureInPictureElement) {
    x.requestPictureInPicture();
  } else {
    document.exitPictureInPicture();
  }
}

...zur Frage

Kann mir jemand bei der Funktion in JavaScript helfen?

// init

let count = 0;

// counter element

const counter = document.getElementById("value");

// increment function

function incrementCounter() {

count = Number(localStorage.getItem("count"));

counter.innerText = count;

localStorage.setItem("count", count + 1);

}

// event listener

window.onload = incrementCounter;

let zurücksetzen = document.getElementById("resetbutton");

function aufnull (){

zurücksetzen = localStorage.setItem("count", 0)

count = Number(localStorage.getItem("count"));

zurücksetzen.addEventListener("click", aufnull);

incrementCounter();

};

zurücksetzen.addEventListener("click", aufnull);

ZUR FRAGE: Ich baue einen Besucherzähler und möchte, dass sich der Wer wieder auf 0 zurücksetzt, wenn man auf den Button Reset drückt. Leider setzt es sich erst zurück, wenn man reset drückt und die seite anschließend wieder aktualisiert.
Kann mir jemand helfen und es erklären?

...zur Frage

HTML window.location.href geht nicht?

https://streamable.com/9pfpva

Ich weiss nicht genau wo hier der Fehler ist aber er leitet nicht beim richitgen namen und passwort weiter? Weiß jemand woran das liegt? Ich bin relativ am anfang mit html.

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function login() {
                var username = document.getElementById('username').value;
                var password = document.getElementById('password').value;


                if (username === 'test123' && password === 'test') {
                    window.location.href = 'http://www.google.com';
                } else {
                    alert('Ungültiger Benutzername oder falsches Passwort.'); // Fehlermeldung bei ungültigen Daten
                }
                return false;
            }


            var loginButton = document.getElementById('loginButton');
            loginButton.addEventListener('click', login);
        });
    </script>

...zur Frage

was ist hier falsch gelaufen?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rocket vs Aliens</title>
  <style>
    canvas {
      background-color: gray;
    }
    
  </style>
  <script>
    let KEY_SPACE = false;
    let KEY_UP = false;
    let KEY_DOWN = false;
    let canvas;
    let ctx;
    let backgroundImage = new Image();
    let rocket = {
      x: 100,
      y: 200,
      width: 200,
      height: 80,
      src: 'img/rocket.png'
    };
    let spaceship = {
      x: 500,
      y: 200,
      width: 100,
      height: 40,
      src: 'img/spaceship.png'
    };
    document.onkeydown = function(e) {
      if (e.keyCode ==32) { // Leertaste gedrückt
        KEY_SPACE = true;
      }
      if (e.keyCode ==32) { // unten gedrückt
        KEY_SPACE = true;
      }
    
      if (e.keyCode ==38) { // Oben gedrückt
        KEY_UP = true;
      }
    }
    document.onkeyup = function(e) {
      if (e.keyCode ==32) { // Leertaste losgelassen
        KEY_SPACE = false;
      }
    
      if (e.keyCode ==38) { // oben losgelassen
        KEY_UP = false;
      }
      if (e.keyCode ==40) { // unten losgelassen
        KEY_DOWN = false;
      }
    }
    function startGame () {
      canvas = document.getElementById('canvas');
       ctx = canvas.getContext('2d');
      loadImages();
      draw();
      // calculate
    }
    function loadImages() {
      backgroundImage.src = 'img/background.png';
      rocket.img = new Image();
      rocket.img.src = rocket.src;
      spaceship.img = new Image();
      spaceship.img.src = spaceship.src;
    }
    function draw() {
      ctx.drawImage(backgroundImage, 0, 0);
      ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
      
      requestAnimationFrame(draw);
    }
  </script>
</head>
<body onload="startGame()">
<canvas id="canvas" width="720" height="480"></canvas>
</body>
</html>

...zur Frage

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen