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.
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:
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
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" 