Wie löse ich dieses Problem?

bin nicht so der hellste mit Java Script, könnte mir jemand sagen was ich falsch gemacht habe? die Zahl soll maximal auf 3 erhöht werden können

Vielen Dank im Vorraus!

Answer 1

[regex9]

Zum einen ist die Syntax deines Codes falsch. Du schließt die Callbackfunktion mitsamt der Argumentenliste nicht und im if-Kopf wolltest du sicherlich eigentlich die Variable count weiterverwenden. Die grundsätzliche Klammersetzung ist falsch.

Zum anderen passt das, was du dort im Code formuliert hast, nicht mit deiner definierten Anforderung überein.

Sobald du einmal eine Callbackfunktion (= Event Handler) bei einem Element für ein Event registriert hast, wird diese immer aufgerufen, sobald das Event ausgelöst wurde. Folglich muss die Zählervariable dort auch geprüft werden.

let count = 0;
const display = document.getElementById("display");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  if (count < 3) {
    ++count;
    display.textContent = count;
  }
});

In diesem Fall wird die Variable count bei jedem Klick um 1 erhöht und ausgegeben. Sobald ihr Wert 3 ist, ändert der Wert sich nicht mehr.

Da nur Text geändert wird, ist das textContent-Property hierbei die passende Wahl. Das innerHTML-Property wird nur benötigt, wenn du tatsächlich HTML (bzw. Nicht-Textknoten) setzen möchtest.

Für eine Ausgabe à la 1/3, 2/3, 3/3 braucht du die Ausgabe nur ein wenig abändern:

display.textContent = count + "/3";

oder du schreibst den letzten Teil direkt statisch in deine HTML-Struktur:

<div role="status">
  <span id="display"></span>
  <span>/3</span>
</div>

Comments

[Benutzer347834]

Vielen Dank für die ausführliche und hilfreiche Erklärung!

Answer 2

[theodoravontane]

Ich bin da auch keine Leuchte, aber schau Dir mal die Klammerung bei if/else an und auch die Farben der Klammern. Das sieht für mich falsch aus.

Ich denke, Du musst den function-Block abschließen, was Du machst, aber damit das else da richtig ist, muss der if-Block auch abgeschlossen sein, und zwar vor dem else.

Comments

[theodoravontane]

Wie hier:

let hour = new Date().getHours();
if (hour < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

Quelle: https://www.w3schools.com/jsref/jsref_if.asp

Aber da ist noch mehr schräg. Das if müsste in die function.

[Benutzer347834]

@theodoravontane

The else statement specifies a block of code to be executed if the condition is false:

if (condition) {

  // block of code to be executed if the condition is true

} else {

  // block of code to be executed if the condition is false

}

Aber meine condition ist ja in dem Fall das wenn es größer als 3 ist dass es nivht weiter gehen

[theodoravontane]

@Benutzer347834

Wenn ich Blödsinn schreibe, sorry, es ist spät, aber ich versuche es:

Du hast eine Bedingung, und wenn die wahr ist, dann wird der erste Codeblock ausgeführt. In Deinem Fall beginnt dieser Block mit der gelben, geschweiften Klammer.

Innerhalb dieses Blocks definierst Du eine function, die Du, beginnend mit der runden rosa Klammer als EventListener hinzufügst und die function selbst beginnen mit der blauen geschweiften Klammer. Jetzt beendest Du aber addEventlistener nicht ordentlich, die runde Kammer kommt zu spät, weil Du vorher schon den Codeblock abschließt.

Das else-Code muss nach den if-Code und sinnvollerweise werden beide Blöcke, bei mehr als einer Zeile Code zwingend geklammert.

Mist, ich glaube, das klingt ziemlich wirr - aber versuche es, schau Dir Deinen Code mal genau an und überlege, was er machen soll. Und dann erklärst Du den Ablauf jemandem, vollkommen egal wem. Dann fällt Dir vielleicht auf, wo es klemmt - manchmal hilft es nämlich, es einfach laut zu sagen, was da passiert um zu merken, warum es nicht fuktionieren kann.

[theodoravontane]

@theodoravontane

Wo letcount herkommt bzw. was damit passiert, ist mir auch nicht ganz klar. Du verwendest das in dem gezeigten Code gar nicht.

Aber bevor wir uns jetzt weiter verzetteln: Welche Fehlermeldung gibt es denn?