Umrechnung via reinem Javascript

  • Hallo!

    Ich soll eine Seite erstellen. Auf dieser sollen Kilometer in Meilen umgewandelt werden.

    Also ganz simpel: Man gibt eine Zahl an (hier:kilometer), klickt auf los und dann soll eben das Ergebnis (Meilen) erscheinen. Das soll mit Hilfe von Javascript geschehen. Javascript soll NICHTt in mein html Dokument eingebettet werden. Ich bräuchte also nur eine Erklärung für das externe und reine Javascript- Dokument.

    Ich hab mich auch schon im Forum umgesehen und finde meist nur Anleitungen für Umrechnungen, die eben eingebettet sind.

    Ich bin blutiger Anfänger & freue mich über jeden Ratschlag!!!

    LG:)

  • Eingebettet der Javascriptcode steht im html Code zwischen

    Code
    1. <script>
    2. hier der code
    3. </script>

    den Tags.


    Du must den Code der dazwischen steht in einer extra Datei Kopieren die mit .js endet.

    Das wird dann im html Code wieder so hinzugegeben

    Code
    1. <script src="linkzumjs.js"></script>


    Dann ist der Js Code in einer Extra Datei und funktioniert genau so als wenn der Js Code im html mit eingebettet ist.

    Oder hast du das irgendwie anders gemeint.

  • Also meine html sieht aktuell so aus:


    <!DOCTYPE html>

    <html lang="de">

    <head>

    <h1> Rechne ganz easy Kilometer in Meilen um!

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="einausgabe.css"/>

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

    <title>Umrechner</title>

    </head>

    <body>

    <input id="eingabe">

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

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

    </body>

    </html>




    DIe Javascript-Datei so:


    <script language="javascript">


    window.onload = function(){


    var button = document.getElementById('umrechnen');

    button.addEventListener("click", kminmeilen);

    function euroToDollar(){

    var betrag = document.getElementById('betrag');

    betrag = betrag.value;

    var meilenauskm = 0.6231;

    var ergebnis = betrag * meilenauskm;

    console.log(ergebnis);

    document.getElementById('ausgabe').innerHTML = "<p>" + ergebnis + " $</p>";


    }

    }

    </script>







    Leider hat es so noch immer nicht den gewünschten Effekt gebracht. Findet wer den Fehler?;(

  • fangen wir mal langsam an

    1 = Wo ist die ID umrechen ?

    2 = Wo ist die ID betrag ?

    3 = was macht der <h1> Tag im head ? , und ist nicht geschlossen ( </h1> )

    4 = <input> hat keinen type Attributte ( type="text" )

    5 = Wo ist die fuction "kminmeilen",

    6 = language="javascript" brauch man nicht mehr schreiben.


    So kann das natürlich nicht klappen.( Punkt 6 ist jetzt nicht wichtig für die funktionalität )


    Sei mal ehrlich, hast du versucht das aus mehreren Scripten zusammen zu kopieren ?

    Die Fehler sollten beim normalen Programmieren nicht passieren.

  • ich habe bereits versuch einiges zu ändern, leider hat das (natürlich) auch nicht zum gewünschten Ziel geführt


    <!DOCTYPE html>

    <html lang="de">

    <head>

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

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="einausgabe.css"/>

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

    <title>Umrechner</title>

    </head>

    <body>

    <input id="betrag">

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

    <div id="umrechnen">


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

    </body>

    </html>



    <script language="javascript">


    window.onload = function(){


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

    button.addEventListener("click", kminmeilen);

    function kminmeilen(){

    var betrag = document.getElementById('betrag');

    betrag = betrag.value;

    var meilenauskm = 0.6231;

    var ergebnis = betrag * meilenauskm;


    document.getElementById('ausgabe').innerHTML = "<p>" + ergebnis + " meilen</p>";


    }

    }

    </script>

  • Jo habe ich mir schon gedacht.


    Ich habe dein Code, ohne irgendwas dran zu ändern mal in codepen kopiert , und komischerweise funktioniert der so .

    https://codepen.io/basti1012/pen/NQqwgL?editors=1000


    Aber du mußt da noch was dran ändern , weil auch wenn er läuft ist das absolute sch... mit den Fehlern und es kann sein das nicht alle Browser die Fehler nicht beachten.

    Also das mußt du noch ändern damit es richtig läuft.

    1 = <h1> muß aus den head Bereich raus, der gehört in den <body> Bereich.

    2 = <input brauch noch ein type="text"

    3 = Das " language="javascript"" kann gelöscht werden.


    So denke das wahr es dann an Fehler wenn ich nix übersehen habe.


    Wenn das geht könnte man noch Abfragen ob die eingegebene Zahl auch nee Zahl ist und kein Buchstabe.

    Das kommt aber erst dann wenn du diese Fehler behoben hast.

  • Kannst du mir vielleicht noch sagen, wo ich den 2. Fehler beheben kann? ich kann im js und im html nicht finden

    Und das language= javascript würde ich gerne für meinen Dozenten drin lassen, da es auch so in der Vorlesung gemacht wurde, aber da sagtest du ja, dass es die Funktion nicht behindern würde.

  • bei Punkt 2 brauchst du nur noch type="text" hinschreiben

    Das kann man hier auch nachlesen https://www.w3schools.com/tags/tag_input.asp

    Dann solltest du deinen Docenten mal sagen das wir im html 5 leben und sein language=javascript sinnlos ist

    Zitat

    Früher setzen Entwickler ein language-Attribut in das script-Tag, um dem Broswer die verwendete Javascript-Version mitzuteilen. In der Praxis können Browser aber mit dem language-Attribut nichts anfangen. Ob der Browser tatsächlich in der Lage ist, das Script auszuführen, wird im Script durch einen Mechanismus geprüft, der „Object-Detection“ – Objekterkennung – genannt wird. Das language-Attribut war schon in XHTML unerwünscht, da es unzuverläßig ist.

    Und noch so ein Habitus: type="text/javascript" ist ebenso nutzlos. Das W3C simulierte damit einen Javascript-Mime-Typ, den es noch nicht gab und den kein Browser erkennt. Der Mime-Typ für Javascript kam erst viel später auf die Welt und lautet application/javascript.

    QUELLE: https://www.mediaevent.de/xhtml/script.html


    So. Da du ja fast alle Fehler selber behoben hast , würde ich deine Script so vollenden.

    DEMO : https://codepen.io/basti1012/pen/BXNwew?editors=1000


    EDIT;

    Du kannst ja mal meinen Code hier testen https://validator.w3.org/nu/#textarea

    und dann mal mit den language=javascript

    Dann kannst du auch sehen das es nicht mehr erwünscht ist . Gib den Link auch deinen Dozenten