Richtige Ausgabe verschwindet nach einer Sekunde - Druckversion +- Javascript-forum (https://javascript-forum.de) +-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4) +--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6) +--- Thema: Richtige Ausgabe verschwindet nach einer Sekunde (/showthread.php?tid=2019) |
Richtige Ausgabe verschwindet nach einer Sekunde - nbergmann - 10.01.2023 <!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? RE: Richtige Ausgae verschwindet nach einer Sekunde - admin - 10.01.2023 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 RE: Richtige Ausgae verschwindet nach einer Sekunde - nbergmann - 10.01.2023 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. RE: Richtige Ausgae verschwindet nach einer Sekunde - admin - 11.01.2023 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/Web/API/Event/preventDefault Das sollte eigentlich auch klappen RE: Richtige Ausgae verschwindet nach einer Sekunde - nbergmann - 11.01.2023 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. RE: Richtige Ausgae verschwindet nach einer Sekunde - rzscout - 11.01.2023 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"). 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> 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 RE: Richtige Ausgae verschwindet nach einer Sekunde - nbergmann - 13.01.2023 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. RE: Richtige Ausgae verschwindet nach einer Sekunde - admin - 13.01.2023 (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/ RE: toggl mit getElementById ohne jquery - rzscout - 13.01.2023 Ich habe eine weitere Version die mit zahlreichen Kommentaren versehen wurde. Ich hoffe dir könnte das weiterhelfen. Code: <!DOCTYPE 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 RE: Richtige Ausgae verschwindet nach einer Sekunde - rzscout - 14.01.2023 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. |