13.01.2023, 23:47
Ich habe eine weitere Version die mit zahlreichen Kommentaren versehen wurde. Ich hoffe dir könnte das weiterhelfen.
Wenn du Fragen zu verschiedenen Abschnitten des Codes hast oder zu bestimmten Funktionen bzw. zu Syntaxfragen, dann einfach ins Forum schreiben und am besten in diesem Thread.
Viele Grüße
rzscout
Code:
<!DOCTYPE html>
<html lang="de">
<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>Buchstaben zählen</title>
<script>
// Schaltet in Javascript den Strict-Modus ein. Nicht vorab deklarierte Variablen und fehlende Semikolon gibt er als Fehler aus.
// Das hilft dabei Fehler zu vermeiden. Und es ist auch wichtig weil es bestimmte Namen reserviert wie private, protected, public, static und yield
'use stric';
// Deklaration der Variablen ohne Werte
var wort, btn, output;
// DOMContentLoaded wird erst getriggert wenn der DOM vollständig geladen wurde, daher kommt es auch nichts zu Fehlern.
document.addEventListener('DOMContentLoaded', ()=>{
// Elemente den Variablen zuweisen
wort = document.getElementById('wort'); // Unser Eingabefeld
btn = document.getElementById('btn'); // Unser Button
output = document.getElementById('output'); // Unser Ausgabefeld
// Wenn der Button mit der ID 'btn' geklickt wird, wird die anonyme Funktion ausgeführt
btn.addEventListener('click', ()=>{
// Deklaration der Variable count und Zuweisung der Zeichenlänge des Inhaltes von dem Element wort
// Wort.value ist der aktuelle Wert und fügt man am Ende noch ein length dazu wird die Zeichenlänge des Wertes von 'wort' in der Variable 'count' gespeichert
// let ist eine neue Form von Variablendeklaration. Im Gegensatz zu var werden die Variablen nur lokal sprich in der Methode/Block nur seine Gültigkeit.
// let werden nach dem Funktionsende geleert und haben noch den Vorteil das dieser Variablenname auch woanders verwendet werden kann ohne das was überschrieben wird.
let count = wort.value.length;
// Dem Element mit der ID output wird der Wert angegeben. Hier wird Template Literals verwendet um Inhalt von der Variable count in den String einzufügen.
output.value = `Die Anzahl der Buchstaben des angegebenen Wortes sind ${count}.`;
/*
Hier eine Erklärung zu Innerhalb von Template Strings die mit einem invertierten Hochkomma ` (Backtick) anfangen und aufhören werden mittels Template Literals Variablen geschrieben.
Hier ein Beispiel: `Ich bin ein ${variable}` => In dem oberen Beispiel wird im Template String die Variable count eingefügt mittels => ${count}
*/
});
});
</script>
</head>
<body>
<!-- Das ist das Eingabefeld mit der ID 'wort' -->
<input type="text" name="wort" id="wort" placeholder="Bitte hier das Wort eingeben">
<!-- Das ist der Button mit der ID 'btn' -->
<button id="btn">Zeichen zählen</button>
<!-- Das ist das Ausgabefeld mit der ID 'output' wie im input-Feld spricht man hier den Wert auch mit dem Attribut 'value' an. -->
<!-- Für output-Felder kein innerHTML-Methode aus Javascript verwenden, da das Feld sich ähnelt wie die Eingabefelder -->
<output id="output">Hier steht das Ergebnis.</output>
</body>
</html>Wenn du Fragen zu verschiedenen Abschnitten des Codes hast oder zu bestimmten Funktionen bzw. zu Syntaxfragen, dann einfach ins Forum schreiben und am besten in diesem Thread.
Viele Grüße
rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" 