HTML + externes JavaScript

Dreifach · 02.09.2023

Hallo zusammen, vielleicht kann mir jemand bei dieser Aufgabe etwas helfen. Es soll eine HTML mit externem Javascript verwendet werden.
Es soll als Überschrift das aktuelle Datum ausgegeben werden, das hatte auch schon funktioniert. Nun sollen 2 Formularfelder mit "Absende-Button" erstellt werden, dabei soll überprüft werden ob die Eingaben der Felder gleich sind...dabei komme ich gerade nicht weiter, und nach langem hin und her wollte ich nun hier um Hilfe bitten.
Nach der Eingabe im Javascript für das Überprüfen ist auch das aktuelle Datum verschwunden usw.

Ich bin mir nicht sicher wie es am besten hier poste deswegen kopiere ich es einfach mal
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<script src="ExterneJS.js"></script>
</head>
<body>
<h1 id="aktuellesDatum"></h1>
<form id="forml" method="post" action="">
<p>
<label for="meintext">E-mail Adresse:</label>
<input type="text" id="Mail1" name="meine_Eingabe" required >
</p>

<p>
<label for="meintext">E-mail Adresse wiederholen:</label>
<input type="text" id="Mail2" name="meine_Eingabe" required >
</p>

<p>
<input type="submit" name="button" id="sende" value="Absenden">
</p>
</form>

</body>
</html>

Java

document.querySelector("#aktuellesDatum").innerHTML = `${tag}.${monat}.${jahr}`;
let datum = new Date();
let tag = datum.getDate();
let monat = datum.getMonth() + 1;
let jahr = datum.getFullYear ();

let formular = document.querySelector ("#form1");
formular.addEventListener ("sende", function (evt) {
let pw1 = document.querySelector ("#Mail1");
let pw2 = document.querySelector ("#Mail2")
if (pw1.value != pw2.value) {
alert ("Keine Übereinstimmung")
evt.preventDefault ();
} else {
alert ("stimmen überein");
}}

Sempervivum · 02.09.2023

Ich sehe da zwei Probleme:

Da Du das Javascript im head einbindest, existiert das Element "#aktuellesDatum" noch nicht wenn das Skript abläuft. Binde das Skript am Ende des body ein, vor dem schließenden </body>.
Du greifst auf die Variablen tag, monat, jahr zu, bevor Du sie ermittelt hast.

Außerdem ein Verbesserungsvorschlag, um das Ganze zu vereinfachen: Verwende toLocaleTimeString um die Uhrzeit als String zu ermitteln:
https://developer.mozilla.org/en-US...ects/Date/toLocaleTimeString?retiredLocale=de

Und es gibt kein Event "sende", verwende statt dessen "submit".

Ich bin mir nicht sicher wie es am besten hier poste deswegen

Das ist leider ein wenig versteckt: Um Codetags zu verwenden, klicke auf die drei Punkte rechts von dem Landschaftssymbol und dann </>

Dreifach · 02.09.2023

Danke schonmal!! ich habe nochmal versucht den Code hier einzufügen, die Probleme bleiben aber noch, das Datum erscheint gar nicht mehr......und es kommt einfach nicht die Meldung das die Passwörter nicht überein stimmen, ich gebe einfach irgendwas ein und click auf absenden dann lädt die Seite sozusagen einfach neu
Das mit dem Datum würde ich eher so lassen, da es so ähnlich auch in dem Lernmaterial vorgegeben ist - toLocaleTimeString ist da wahrscheinlich schon etwas zu weit in dem Sinne xD

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    
</head>

<body>
    <h1 id="aktuellesDatum"></h1>
    
    
<form id="forml" method="post" action="">
    <p>
    <label for="meintext">E-mail Adresse:</label>
    <input type="text" id="Mail1" name="meine_Eingabe" required >
    </p>
    
    <p>
    <label for="meintext">E-mail Adresse wiederholen:</label>
    <input type="text" id="Mail2" name="meine_Eingabe" required >
    </p>
    
    <p>
    <input type="submit" name="button" id="sende" value="Absenden">
    </p>
</form>
    
    <script src="ExterneJS.js"></script>
</body>
</html>

Javascript:

document.querySelector("#aktuellesDatum").innerHTML = `${tag}.${monat}.${jahr}`;
let datum = new Date();
let tag = datum.getDate();
let monat = datum.getMonth() + 1;
let jahr = datum.getFullYear ();

 
 
 
let formular = document.querySelector ("#form1");
formular.addEventListener ("submit", function (evt) {
    let pw1 = document.querySelector ("#Mail1");
    let pw2 = document.querySelector ("#Mail2")
    if (pw1.value != pw2.value) {
        alert ("Keine Übereinstimmung")
        evt.preventDefault ();
    } else {
        alert ("stimmen überein");
    }}

Sempervivum · 02.09.2023

Dies ist immer noch fehlerhaft:

Code:

document.querySelector("#aktuellesDatum").innerHTML = `${tag}.${monat}.${jahr}`;
let datum = new Date();
let tag = datum.getDate();
let monat = datum.getMonth() + 1;
let jahr = datum.getFullYear ();

Du musst die Variablen als erstes ermitteln:

Code:

let datum = new Date();
let tag = datum.getDate();
let monat = datum.getMonth() + 1;
let jahr = datum.getFullYear ();
document.querySelector("#aktuellesDatum").innerHTML = `${tag}.${monat}.${jahr}`;

Dreifach · 02.09.2023

ok habe es entsprechend geändert aber die selben Probleme bleiben

wenn ich im JavaScript alles bzgl. des Formular entferne wird das Datum im Browser dann wieder angezeigt aber ich brauche ja beides

Sempervivum · 02.09.2023

In solchen Fällen immer als erstes in die Console sehen, dort findest Du ggf. Fehlermeldungen. Rechtsklick auf die Seite und dann "(Element) untersuchen".

Mir scheint im form-Tag hast Du das "forml" mit "l" geschrieben, während es im Javascript "form1" heißt.

Dreifach · 02.09.2023

da sagt er mir auch keine Fehler?? ich habe das Gefühl das ich irgendwie im Javascript die Funktion für das Datum und die Funktion für das Formular irgendwie nochmal teilen muss
also ob durch den Code für das Formular alles eben nicht erkennbar wird sozusagen, weil ohne Codes für das Formular funktioniert es ja mit dem Datum
praktisch zählt es den ganzen code für das Formular noch zum Datum...ich hoffe meine Erklärung macht Sinn

Sempervivum · 02.09.2023

da sagt er mir auch keine Fehler??

Kann nicht sein. Ich habe jetzt eine Testdatei gemacht und bekomme schon einen Fehler:

Uncaught SyntaxError: missing ) after argument list

Ganz am Schluss des Javascript fehlt eine schließende runde Klammer.
Und weiter besteht der Fehler, dass im HTML die ID "forml" steht und im Javascript "form1".
Korrigiere ich beides, funktioniert es.

Dreifach · 02.09.2023

ja ich hatte zuerst das JavaScript statt die HTML auf Fehler überprüft

geklappt hatte es irgendwie immer noch nicht, viel rumprobiert und so hat es dann funktioniert...musste eben nochmal eine geschwungene und eine runde Klammer eingeben
schwere Geburt

alert ("stimmen überein");
}
})

Nochmals Danke!!!