Javascript in HTML eingebettet

  • Hallo!

    Ich hatte Javascript in mein HTML Dokument eingefügt- alles funktioniert ohne Probleme.

    Leider soll ich keinen eingebetteten Stil benutzen sondern es als externe Datei anlegen und dann in die HTML-Datei einfügen.

    Also habe ich den Code herauskopiert und in die neue Javascript-Datei eingefügt. Jetzt funktioniert allerdings die Seite nicht mehr, beziehungsweise mein Umrechner funktioniert nicht.

    Mein HTML-Dokument ist valide, ich schätze es liegt an der Javascript-Datei. Leider finde ich den Fehler nicht


    meine html:

    <!DOCTYPE html>

    <html lang="de">

    <head>

    <link href="einundausgabe.css" rel="stylesheet">

    <script src="einundausgabe.js" defer></script>

    <title>Patricia's Umrechner</title>

    </head>

    <body>

    <h1> Rechne ganz easy Kilometer in Meilen um!</h1>

    <input type="text" id="eingabe">

    <button id="eingabebutton">klick!</button>

    <div id="ausgabe"></div>

    <footer> Viel Spass mit deinem Ergebnis!</footer>

    </body>

    </html>


    meine Javascript-Datei:

    <script>

    <script language="javascript">



    window.onload = function(){

    var button = document.getElementById("eingabebutton");

    var ausg=document.getElementById("ausgabe");

    button.addEventListener("click", function(){

    var betrag = document.getElementById("eingabe").value;

    if(isNaN(betrag)){

    ausg.innerHTML ="Bitte gebe eine Zahl ein";

    return

    }

    var ergebnis = 0.621371*betrag;

    ausg.innerHTML = ergebnis.toFixed(2) + " miles";

    })

    </script>

  • Also ich habe das mal ausprobiert und bei mir funktioniert es mit folgendem Code (script ausgelagert in main.js).

    HTML:

    <!DOCTYPE html>
    <html lang="de">
    <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="einundausgabe.css" rel="stylesheet"> <title>Patricia's Umrechner</title>
    </head> <body>

    <h1> Rechne ganz easy Kilometer in Meilen um!</h1>

    <input type="text" id="eingabe">

    <button id="eingabebutton">klick!</button>

    <div id="ausgabe"></div>

    <footer> Viel Spass mit deinem Ergebnis!</footer>

    <script src="main.js"></script>

    </body>

    </html>


    Javascript-Datei (main.js):

    window.onload = function(){

    var button = document.getElementById("eingabebutton");

    var ausg=document.getElementById("ausgabe");

    button.addEventListener("click", function()

    { var betrag = document.getElementById("eingabe").value; if(isNaN(betrag))

    { ausg.innerHTML ="Bitte gebe eine Zahl ein"; return } var ergebnis = 0.621371*betrag; ausg.innerHTML = ergebnis.toFixed(2) + " miles"; })
    }

  • basti1012 schrieb:

    Er braucht das Script ja nur unterhalb des Schließendes Bodys packen dann sollte es ja schon klappen.

    Bleibt falsch, vollkommen egal, wo man das Script einbindet.

    Zudem gehören Script-Tags in den Dokumenten Header. Die Angewohnheit es unten an den Fuss des Dokument zu setzen ist unnötig, wenn man DOMContentLoaded verwendet.


    basti1012 : Beiträge inmitten einer Diskussion zu entfernen zerstört die Beitragszusammenhänge und und ist nicht die feine At...

  • basti1012 : Beiträge inmitten einer Diskussion zu entfernen zerstört die Beitragszusammenhänge und und ist nicht die feine At...

    Da stimme ich eigentlich zu .

    Den hatte ich aber ca 45 Minuten nach den posten rausgenommen damit den keiner lesen tut weil ich falsch geschrieben habe weil hatte mich da vertan.

    Hatte das mit den DOMContentLoaded nicht gesehen auf den Handy,

    erst wo ich zuhause wahr am Laptop.


    Wie kann das sein das du den Beitrag noch siehst ? Aus der Cache geholt ?