Währungsrechner in JavaScript

[nerdpolitics]

Hallo, ich bin neu hier und habe sehr sehr rudimentäre Kenntnisse im Programmieren.

Kurz zu meinem Problem. In eimem Unikurs namens Computerlinguistik werden Basics ind HTML und JavaScript vermittelt. Aufgabe ist es einen kleinen Währungsrechner zu programmieren von Euro nach Dollar bzw. Dollar nach Euro.

Ich habe einige Beispiele gefunden, will sie aber a) nicht einfach kopieren und b) benutzen sie Funktionen/Elemente, die ich nicht kenne und bisher nicht verstehe.

Ich bekomme bisher nur dieses einfache Programm hin.

// Währungsrechner Dollar in Euro / Euro in Dollar
const wechselEuroDollar = 1.1020
const wechselDollarEuro = 0.9091

//let eingabe // brauche ich die Variable?
//macht es einen Unterschied, ob nur "eingabe" oder eingabe = ""?


eingabe = prompt("Bitte Betrag eingeben");
alert(eingabe * wechselEuroDollar);`

Das Problem ist erstens, dass es nur Euro in Dollar umwandelt und nicht umgekehrt. Außerdem verschwindet das Fenster, wenn man Buchstaben eingibt und es erscheint nicht erneut. Ich habe schon mit if-else bzw. switch probiert, am Anfang eine Vorauswahl zu treffen:

eingabe = prompt("Für die Umwandlung von Euro in Dollar bitte \"Euro" eingeben, für Dollar in Euro \"Dollar" ".);
  
switch (eingabe) {case "Euro" : prompt("Euro in Dollar");break;  
   
case "Dollar" : prompt("Dollar in Euro"); break;
    
default : prompt("Dollar oder Euro eingeben"); break; }

Das Problem hierbei ist, dass ich danach keine Werte eingeben kann bzw. keine mathematische Operation durchführen kann. Ich kann auch keine zweite if-else-Bedingung benutzen.

Im prinzp Stelle ich mir das Programm so vor: Es kommt ein Begrüßungstext, indem gefragt ob in welche Richtung gewechselt werden soll. Nach eingabe vom Wort "Euro" oder "Dollar" soll dann der Betrag eingeben werden und das Ergebnis erscheinen. Falls man sofort eine Zahl eingibt, sollte eine Meldung kommen, dass man zuerst Euro oder Dollar eingeben soll.

Meine Frage ist eigentlich, ob meine Vorstellung mit den wenigen Befehlen, die ich kenne (if-else, switch, Variablen erzeugen) realisierbar ist oder es nur mit anderen funktioniert. Vielleicht stelle ich mich auch einfach nur richtig blöd an :)

Viele Grüße und Entschuldigung, falls mein erster Eintrag mit dem Code noch etwas seltsam aussieht.

[Felix Riesterer]

Liebe(r) nerdpolitics,

folge dem Prinzip EVA. Da ist zuerst die Eingabe, dann die Verarbeitung und zum Schluss die Ausgabe. Diese Reihenfolge ist immer gleich. Niemals anders herum. Das bedeutet für Dich, dass Dein Programm zuerst eine Eingabe verlangt, um dann nach der Berechnung das Ergebnis auszugeben.

Die Benutzung von alert, prompt und Konsorten ist keine gute Idee. Du möchtest stattdessen ein Formular mit zwei Eingabefeldern und einem Button:

€______ [=] $______

In diesem Formular kann man entweder den Euro-Wert, oder den Dollar-Wert eintragen. Der Button mit dem Istgleichzeichen löst dann die Berechnung des passenden Gegenwerts aus. Das leere Feld wird als Ausgabe, das ausgefüllte Feld als Eingabe verstanden. Sind beide Felder ausgefüllt, wird das erste als Eingabe verstanden.

Du benötigst also drei Dinge:

1. Formular mit den passenden Formular-Elementen
2. einen Weg um die Formularelemente auszuwerten (Button-Klick, Feldinhalte lesen/schreiben)
3. die Funktion zum Berechnen (hast Du schon)

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Du möchtest stattdessen ein Formular mit zwei Eingabefeldern und einem Button:

€______ [=] $______

Ein Button?

Ich will 8 Euro in Dollar umrechnen, trage im linken Eingabefeld 8 ein und drücke auf [=]. Im rechten Feld steht dann 8.82, so weit so gut.

Dann will ich 15 Dollar in Euro umrechnen, trage im rechten Eingabefeld 15 ein. Im linken steht noch die 8. Was soll denn nun beim Drücken auf [=] passieren?

Man bräuchte wohl zwei Buttons: einen für Euro in Dollar und einen für Dollar in Euro.

Braucht man aber nicht.

“Design isn’t crafting a beautiful, textured button. It’s figuring out if there’s a way to get rid of the button altogether.” —Edward Tufte

Wenn man bei der Eingabe in ein Eingabefeld das jeweils andere gleich automatisch aktualisiert, braucht man gar keinen Button.

☞ Codepen: aufs input-Event gelauscht – nicht bei jedem Eingabefeld, sondern beim Widget (event delegation), und im Eventhandler abgefragt, welches Eingabefeld denn nun der Auslöser war.

Die Umrechnungskurse hab ich in einem Objekt zusammengefasst.

Ansonsten ist noch aria-live="polite" zu erwähnen, damit das Ergebnis auch vom Screenreader angesagt wird. (Funktioniert im VoiceOver noch nicht ganz zufriedenstellend, der ist da etwas zu geschwätzig. Morgen sollte sich eine Gelegenheit bieten, jemanden zu fragen, der sich damit auskennt.)

LLAP 🖖

[Felix Riesterer]

Lieber Gunnar,

☞ Codepen: aufs input-Event gelauscht – nicht bei jedem Eingabefeld, sondern beim Widget (event delegation), und im Eventhandler abgefragt, welches Eingabefeld denn nun der Auslöser war.

ist das mit IEs nicht problematisch? Zumindest stand da etwas im Wiki dazu.

Liebe Grüße

Felix Riesterer

[Matthias Scharwies]

Servus!

Lieber Gunnar,

☞ Codepen: aufs input-Event gelauscht

ist das mit IEs nicht problematisch?

Das Wiki-Beispiel funzt net im IE11.

Wollte Gunnars Beispiel ausprobieren - Codepen öffnet sich im IE11 nur mit Warnhinweis, dass es keine Legacy-Browser unterstützt.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo nerdpolitics,

ein <form> Element, wie Felix schrieb, kann man nutzen, braucht es aber hauptsächlich dann wenn man einen Webserver hat der die Daten verarbeitet. Den hast du nicht, oder in deiner Liste von Webtechnologien stünde auch PHP oder ähnliches.

Um in JavaScript sauber mit einem Form zu interagieren muss man einiges tun, das wird dich überfordern.

Ich wundere mich ohnehin das ihr als Einsteiger keinen Leitfaden bekommen habt, wie ihr vorgehen sollt.

Du brauchst auf jeden Fall HTML mit Script darin. Nur mit JavaScript ist das Unsinn.

Mein Vorschlag für blutige Anfänger wäre, zwei <input type="number"> und zwei <button> Elemente zu verwenden (garniert mit dem üblichen drumherum wie z.B. Beschriftungen). Ein Input für Euro, eins für Dollar. Ein Button rechnet den Inhalt des Euro Elements in Dollar um und speichert das Ergebnis im Dollar Element, der andere umgekehrt.

Die Input Elemente bekommen noch id Attribute, damit du sie finden kannst, und bei den Buttons reagierst du mit JavaScript auf das click Event. Da holst du dir den Wert aus dem einen Input, rechnest den value um, rundest und speichert das Ergebnis im anderen Input.

Wenn du jetzt komplett abgehängt bist, dann

• ist die Aufgabe anders gemeint als du sie darstellst und ich bin auf dem falschen Weg
• verlangt der Prof mehr als er euch beigebracht hat
• hast du einiges von dem, was ihr können solltet, versäumt

Rolf