Laura: if... else... Funktion, Ausgabe stimmt nicht

Hallo Ihr Lieben,

ich bin neu hier und ich habe mich vor kurzem erst angefangen mich mit Java Script auseinader zu setzen. Vor ein paar Wochen habe ich ein kleines Quiz mit Java Script programmiert. Das funktioniert alles einwandfrei.

Nun möchte ich, dass bei einer bestimmten Punktzahl ein Text ausgegeben wird. Ich habe hier eine if else Funktion verwendet die wie folgt arbeiten soll:

Wenn Punktzahl über 20, dann gibt aus "Über 20"

Wenn nicht, dann gib aus "Unter 20"

Egal welche Zahl ich in #endpoints schreibe, es wird immer "Unter 20" ausgegeben.

<!doctype html> <html> <body> <h1>JavaScript If Else Example</h1> <p id="endpoints">10</p> <p id="message"></p> <script> var punkte = document.getElementById("endpoints"); if(punkte > 20){ document.getElementById("message").innerHTML = "über 20"; } else{ document.getElementById("message").innerHTML = "unter 20"; } </script> </body> </html>

Ich hoffe ich habe das Problem relativ verständlich beschrieben und mir kann jemand helfen! Danke schonmal für die Antworten

Liebe Grüße,

Laura

  1. Hallo

    Nun möchte ich, dass bei einer bestimmten Punktzahl ein Text ausgegeben wird. Ich habe hier eine if else Funktion verwendet die wie folgt arbeiten soll:

    Wenn Punktzahl über 20, dann gibt aus "Über 20"

    Wenn nicht, dann gib aus "Unter 20"

    Egal welche Zahl ich in #endpoints schreibe, es wird immer "Unter 20" ausgegeben.

    <!doctype html> <html> <body> <h1>JavaScript If Else Example</h1> <p id="endpoints">10</p> <p id="message"></p> <script> var punkte = document.getElementById("endpoints"); if(punkte > 20){ document.getElementById("message").innerHTML = "über 20"; } else{ document.getElementById("message").innerHTML = "unter 20"; } </script> </body> </html>

    Hast dun schon geprüft, was in der Variable punkte drinsteht? Mit console.log(punkte); direkt nach der Zeile var punkte = document.getElementById("endpoints"); wirst du feststellen, dass die Variable das betreffende Element und nicht dessen Textinhalt enthält. Den bekommst du mit textContent.

    var punktelem = document.getElementById("endpoints"); console.log(punktelem); var punkte = punktelem.textContent; console.log(punkte); if(punkte > 20){ document.getElementById("message").innerHTML = "über 20"; } else{ document.getElementById("message").innerHTML = "unter 20"; }

    In der Konsole der Entwicklertools deines Browsers kannst du die mit console.log generierten Kontrollausgaben anschauen. Wenn schlussendlich alles funktioniert, können die betreffenden Zeilen auch aus dem Skript verschwinden.

    Tschö, Auge

    -- Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
    Hohle Köpfe von Terry Pratchett
    1. Vielen Dank für die schnelle Antwort!

      Ich konnte das Problem nun lösen und die Ausgabe ist korrekt!

      Liebe Grüße,

      Laura

      1. Tach!

        Ich konnte das Problem nun lösen und die Ausgabe ist korrekt!

        Anzumerken wäre auch noch, dass HTML auch das Element output kennt. Das hat die Eigenschaft value, mit der man etwas einfacher auf dessen Inhalt zugreifen kann.

        dedlfix.

    2. Hallo

      Zwei Punkte zur Ergänzung.

      Die Ermittlung des Textinhalts funktioniert mit …

      var punkte = document.getElementById("endpoints").textContent;

      … auch in einer Zeile.

      Zudem solltest du überlegen, ob du in der Ausgabe „über 20“/„unter 20“ überhaupt und/oder irgendwann HTML-Elemente zu erzeugen gedenkst. Wenn nicht, benutze statt innerHTML lieber textContent (die Funktion liest und schreibt Elementinhalt). textContent ist schneller als innerHTML und vermeidet das eventuelle Einschleusen von unerwünschtem Code, was mit innerHTML prinzipbedingt möglich ist.

      Die unzutreffende Ausgabe (20 ist nicht unter 20) bleibt zu beheben. Hier habe ich es mal auf die Schnelle angepasst.

      var punkte = document.getElementById("endpoints").textContent; console.log(punkte); if(punkte > 20){ document.getElementById("message").textContent = "über 20"; } else{ document.getElementById("message").textContent = "bis zu 20"; }

      Tschö, Auge

      -- Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
      Hohle Köpfe von Terry Pratchett
      1. @@Auge

        Zudem solltest du überlegen, ob du … überhaupt und/oder irgendwann HTML-Elemente zu erzeugen gedenkst. Wenn nicht, benutze statt innerHTML lieber textContent

        Und wenn doch, benutze statt innerHTML lieber insertAdjacentHTML

        if(punkte > 20){ document.getElementById("message").textContent = "über 20"; } else{ document.getElementById("message").textContent = "bis zu 20"; }

        Hier bietet sich der ternäre Operator an:

        document.getElementById("message").textContent = (punkte > 20) ? "über 20" : "bis zu 20";

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. Tach!

    Wenn Punktzahl über 20, dann gibt aus "Über 20"

    Wenn nicht, dann gib aus "Unter 20"

    Das wäre nicht richtig, genau 20 ist nicht "unter 20". (Das eigentliche Problem hat Auge schon beantwortet.)

    dedlfix.