Login

nbergmann · 10.01.2023, 13:26

<!DOCTYPE html><html lang="de">
<head>
<meta charset="utf-8">
<title>Länge der Eingabe prüfen</title>
<link rel="stylesheet" href="js4.css">
<script>
function wortlaengezaehlen()
{
const eg = document.getElementById("idEingabe").value;
const wortlaenge = eg.length;
{
let inf = document.getElementById("info");
inf.innerHTML = "Das Wort besteht aus " + wortlaenge + " Buchstaben.";
}
}
</script>
</head>
<body>
<form id="idForm" method="post" >
<p><input id="idEingabe" name="eingabe"
required="required"> Gib ein Wort ein.</p>
<p id="info"></p>
</form>
<script>
document.getElementById("idForm").addEventListener
("submit", function() { return wortlaengezaehlen();});
</script>
</body>
</html>

Bei meinem kleinen Programm verschwindet die richtige Ausgabe nach einer Sekunde. Warum? Wie ändere ich das?

***admin*** · (Dieser Beitrag wurde zuletzt bearbeitet: 04.09.2023, 02:42 von admin.)

Das liegt an ein form Element und submit.
Was hast du den genau vor?
Weil, so ginge es auch

Es kommt aber auch drauf an was du genau vorhast . Das Submit ist eigentlich dafür da um was zum Server zu senden und ggf. eine Antwort enthält.

Bei einen reinen Javascript Code , ohne Informationen die zum Server müssen (wie dein Script zur Zeit) , brauch man kein Submit eigentlich

nbergmann · 10.01.2023, 18:35

Als Anfänger suche ich mir Aufgaben zum Üben.

Herzlichen Dank für deine Mühe.
Du hast "submit" durch "keypress" ersetzt, den Formular-Container aufgelöst und folglich "idForm" in "idEingabe" geändert. Es funktioniert. Aber ein Schönheitsfehler ist, dass der Antwortsatz schon nach Eingabe des ersten Zeichens erscheint, ohne auf "Enter" zu warten.

***admin*** · 11.01.2023, 00:17

Das könntest du änder, wenn du einen Button einbaust , oder eine Abfrage machst ob die Enter Taste gedrückt wurde.

Oder.
Du behältst dein Code wie du ihn hattest und unterbindest das submit verhalten mit
https://developer.mozilla.org/en-US/docs...entDefault

Das sollte eigentlich auch klappen

nbergmann · 11.01.2023, 17:47

Auf dem Ausbildungsniveau bin ich noch nicht.
Es wird ja immer verschachtelter.
Hier noch mal die Aufgabe:
"Es soll mitgeteilt werden, wie viele Buchstaben ein eingegebenes Wort enthält."
Geht das nicht einfacher und kürzer?
Mit Sehnsucht denk ich daran zurück, wie einfach so eine Aufgabe vor 30 Jahren mit Turbo Pascakl zu lösen war.

Vielleicht habe ich das Chaos verursacht, weil ich Teile aus komplexeren funktionierenden Programmen entnommen habe.
Du hast mir je schon bei der Entschlackung geholfen.

***rzscout*** · 11.01.2023, 18:30

Moin nbergmann,
das ist schon einmal gut das du EventListener verwendest. Das ist schon moderner Code. Jetzt zum Problem mit dem Formular von dir. Wenn du submit auslöst und du keine Angaben in dem Attribut 'action' schreibst, sendet er die Daten an die gleiche Adresse zurück. Dies kann nicht bearbeitet werden. Dein Ergebnis wird eine oder zwei Sekunden angezeigt, weil in der Zeit die Seite neu geladen wird. Die Lösung für das Problem ist ganz simple: das Zauberwort/Methode heißt 'preventDefault()'. Es wird der EventListener ausgelöst, aber das Abschicken des Formulars wird damit unterbunden.

Code:
document.getElementById("idForm").

addEventListener("submit", function(event) {

  event.preventDefault();

  wortlaengezaehlen();

});

Damit können die Daten des Formulars verarbeitet werden ohne das die Seite neu geladen wird da die Daten an die gleiche Seite geschickt werden.

Jetzt zu der einfachen Lösung von mir:

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>

        var wort, btn, output;

        document.addEventListener('DOMContentLoaded', ()=>{

            wort = document.getElementById('wort'); btn = document.getElementById('btn');

            output = document.getElementById('output');

            btn.addEventListener('click', ()=>{

                let count = wort.value.length; output.value = `Die Anzahl der Buchstaben des angegebenen Wortes sind ${count}.`;

            });

        });

    </script>

</head>

<body>

    <input type="text" name="wort" id="wort" placeholder="Bitte hier das Wort eingeben">

    <button id="btn">Zeichen zählen</button><output id="output">Hier steht das Ergebnis.</output>

</body>

</html>

JavaScript ist kein Pascal und ist damit nicht vergleichbar. Javascript offiziell auch ECMAScript genannt dient hauptsächlich in Browsern als Steuerung der Webseite. JavaScript wird heutzutage auch auch außerhalb vom Browser genutzt. Zu Beispiel zur Programmierung mit node.js als eigenständige Anwendung für unterschiedliche Betriebsysteme und Plattformen. Hier ist zu beachten das die Syntax sich von Pascal sehr stark unterscheidet. Java, C, C++ und C# haben einen ähnlichen Syntax, sind aber im Aufbau und Struktur unterschiedlich und erfüllen unterschiedliche Aufgaben.

Viel Erfolg
rzscout

nbergmann · 13.01.2023, 17:19

Hallo rzscout!

Um dein Programm zu verstehen, habe ich es für mich strukturiert und verändert. Dass es trotzdem funktioniert, war ein Erfolgserlrbnis.

<!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 von rzscout (angepasst) </title>
<script>
var wort, btn, output;
document.addEventListener
('DOMContentLoaded', ()=>
{
wort = document.getElementById('wort');
btn = document.getElementById('btn');
output = document.getElementById('output');
btn.addEventListener
('click', ()=>
{
let count = wort.value.length;
output.value = `Das Wort hat ${count} Buchstaben.`;
}
);
}
);
</script>
</head>
<body>
<input type="text" name="wort" id="wort" placeholder="Hier das Wort eingeben"><p>
<button id="btn">Zeichen zählen</button><p><output id="output">
</body>
</html>

Um das alles zu verstehen, brauche ich wohl noch ein paar Seiten Lehrbuch.

***admin*** · 13.01.2023, 19:44

(13.01.2023, 17:19)nbergmann schrieb: Um das alles zu verstehen, brauche ich wohl noch ein paar Seiten Lehrbuch.

Ich persönlich finde diese Seite zum Lernen ganz gut
https://www.html-seminar.de/

Da gibt es auch extra Javascript
https://www.javascript-kurs.de/
und PHP Kurse
https://www.php-kurs.com/

***rzscout*** · 13.01.2023, 23:47

Ich habe eine weitere Version die mit zahlreichen Kommentaren versehen wurde. Ich hoffe dir könnte das weiterhelfen.

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

***rzscout*** · 14.01.2023, 13:06

Nachtrag: Gerne bekommst du mehr Infos zu bestimmten Befehlen und Abschnitten. Fragen kostet nix. Ich empfehle immer gern nebenbei auch aktuelle Fachliteratur zu Javascript zu lesen. Das hilft dir bei dem Prozesses zu lernen.

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken