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

SELF-Forum

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

Laura (Versionen)
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. if... else... Funktion, Ausgabe stimmt nicht

    Auge
    – Informationen zu den Bewertungsregeln

    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
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. if... else... Funktion, Ausgabe stimmt nicht

      Lauraa
      – Informationen zu den Bewertungsregeln

      Vielen Dank für die schnelle Antwort!

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

      Liebe Grüße,

      Laura

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. if... else... Funktion, Ausgabe stimmt nicht

        dedlfix
        – Informationen zu den Bewertungsregeln

        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.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. if... else... Funktion, Ausgabe stimmt nicht, Ergänzung

      Auge
      – Informationen zu den Bewertungsregeln

      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
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. if... else... Funktion, Ausgabe stimmt nicht, Ergänzung

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@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
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. if... else... Funktion, Ausgabe stimmt nicht

    dedlfix
    – Informationen zu den Bewertungsregeln

    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.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln