Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Interagierende Inputfelder
#1
Hallo zusammen,

ich bin seit kurzem dabei, mir selbst die Grundlagen vom programmieren beizubringen und versuche mich nun an kleinen Projekten. Aktuelle versuche ich einen Währungsrechner mit VSC in Kombination mit HTML, CSS und JS aufzubaun. Mit dem Overlay bin ich an sich schon ganz zu frieden.

Im Code stoße ich jedoch auf ein Problem. Einen Eurobetrag einzugeben und die Ausgabe in den Angegebenen Währungen funktioniert schon ganz gut im aktuellem Stadium. Zwar muss ich den Umrechnungsfactor im Code noch manuell eintragen (diesem Problem möchte ich mich später widmen), doch wenn ich versuche den Code so auszubauen, dass es auch mit den anderen Eingabefeldern in eine andere Richtung funktioniert haperts...

Was funktioniert:
Code:
function calc() {
        let Euro = eurofield.value;
        let resulteurofranken = Euro * 1.01;
        frankenfield.value = resulteurofranken.toFixed(2).replace('.', ',');
        let resulteurodollar = Euro * 1.09;
        dollarfield.value = resulteurodollar.toFixed(2).replace('.', ',');
        let resulteuropound = Euro * 0.88;
        poundfield.value = resulteuropound.toFixed(2).replace('.', ',');
}

Was ich gern hätte wär in etwa:

Code:
if (eurofield.value =< 0) {
        let Franken = frankenfield.value;
        let resultfrankeneuro = Franken * 0.99;
        eurofield.value = resultfrankeneuro.toFixed(2).replace('.', ',');
        let resultfrankendollar = Franken * 1.08;
        dollarfield.value = resultfrankendollar.toFixed(2).replace('.', ',');
        let resultfrankenpound = Franken * 0.88;
        poundfield.value = resultfrankenpound.toFixed(2).replace('.', ',');
            };

Meine Grundidee war die funktion überprüfen zu lassen, ob eurofield leer oder "0" ist und das Programm dann schaut, ob frankenfield value hat und dann diese Berechnung durchführt (und weiter dann wenn frankenfield "0" oder leer ist zu dollarfield weitergeht usw.
Ist das Projekt in der Form realisierbar oder verlauf ich mich da im Code in eine Sackgasse?

Liebe Grüße

[Bild: 20230212131645531c96a82e3e71901a4ce399c0df0192.jpg]
Zitieren
#2
Moin Spachinger,
ja das mit dem Umrechnen ist nicht immer so einfach. Deswegen habe ich hier mit Umrechnungsfaktoren gearbeitet. Vergiss bitte nicht das value ein String zurück gibt und man mithilfe der 'parseFloat'-Methode den Wert in eine Gleitkommazahl umwandeln kann. Hier mein Codebeispiel:
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>Währungsrechner</title>
    <style>
        * {
            margin: 0; padding: 0;
        }
        body {
            width: 100vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            padding: 48px;
        }
    </style>
    <script>
        'use strict';
        // EUR(Euro), CHR(Schweizer Franken), USD(US-Dollar), JPY(Japan Yen), RMB(Chinesische Yuan)
        const faktor_eur = [1,1,1.09,141.03,7.34];
        const faktor_chf = [1,1,1.08,140.69,7.32];
        const faktor_usd = [0.92,0.92,1,129.78,6.75];
        const faktor_jpy = [0.0071,0.0071,0.0077,1,0.052];
        const faktor_rmb = [0.14,0.14,0.15,19,23,1];
        var eur_currency, chf_currency, usd_currency, chf_currency, rmb_currency;
        document.addEventListener('DOMContentLoaded', init);
        function init() {
            eur_currency = document.getElementById('eur_currency');           
            chf_currency = document.getElementById('chf_currency');
            usd_currency = document.getElementById('usd_currency');
            jpy_currency = document.getElementById('jpy_currency');
            rmb_currency = document.getElementById('rmb_currency');
            eur_currency.addEventListener('input', function() {
                chf_currency.value = (parseFloat(eur_currency.value)*faktor_eur[1]);
                usd_currency.value = (parseFloat(eur_currency.value)*faktor_eur[2]);
                jpy_currency.value = (parseFloat(eur_currency.value)*faktor_eur[3]);
                rmb_currency.value = (parseFloat(eur_currency.value)*faktor_eur[4]);
            });
            chf_currency.addEventListener('input', function() {
                eur_currency.value = (parseFloat(chf_currency.value)*faktor_chf[0]);
                usd_currency.value = (parseFloat(chf_currency.value)*faktor_chf[2]);
                jpy_currency.value = (parseFloat(chf_currency.value)*faktor_chf[3]);
                rmb_currency.value = (parseFloat(chf_currency.value)*faktor_chf[4]);               
            });
            usd_currency.addEventListener('input', function() {
                eur_currency.value = (parseFloat(usd_currency.value)*faktor_usd[0]);
                chf_currency.value = (parseFloat(usd_currency.value)*faktor_usd[1]);
                jpy_currency.value = (parseFloat(usd_currency.value)*faktor_usd[3]);
                rmb_currency.value = (parseFloat(usd_currency.value)*faktor_usd[4]);                             
            });
            jpy_currency.addEventListener('input', function() {
                eur_currency.value = (parseFloat(jpy_currency.value)*faktor_jpy[0]);
                chf_currency.value = (parseFloat(jpy_currency.value)*faktor_jpy[1]);
                usd_currency.value = (parseFloat(jpy_currency.value)*faktor_jpy[2]);
                rmb_currency.value = (parseFloat(jpy_currency.value)*faktor_jpy[4]);                             
            });
            rmb_currency.addEventListener('input', function() {
                eur_currency.value = (parseFloat(rmb_currency.value)*faktor_rmb[0]);
                chf_currency.value = (parseFloat(rmb_currency.value)*faktor_rmb[1]);
                usd_currency.value = (parseFloat(rmb_currency.value)*faktor_rmb[2]);
                jpy_currency.value = (parseFloat(rmb_currency.value)*faktor_rmb[3]);                             
            });
        }
    </script>
</head>
<body>
    <label for="eur_currency">EUR - Euro</label>
    <input type="number" name="eur_currency" id="eur_currency">

    <label for="chf_currency">CHF - Schweizer Franken</label>
    <input type="number" name="chf_currency" id="chf_currency">

    <label for="usd_currency">USD - US-Dollar</label>
    <input type="number" name="usd_currency" id="usd_currency">

    <label for="chf_currency">JPY - Yen (Japan)</label>
    <input type="number" name="jpy_currency" id="jpy_currency">

    <label for="rmb_currency">RMB - Renminbi (China)</label>
    <input type="number" name="rmb_currency" id="rmb_currency">
</body>
</html>

Viele Grüße

rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#3
Vielen herzlichen Dank, funktioniert schonmal ganz gut. Als nächstes möcht ich mich dran setzten und rausfinden, ob ich die Umrechnungsfaktoren automatisch aktuell halten kann. Schätze mal, dass das ein etwas größerer Aufwand wird
Zitieren
#4
Grüß euch,

ich hätte noch eine ergänzende Frage: ist es (einfach) möglich die Ausgabe auf 2 Nachkommastellen zu beschränken, ohne dass die anderen Ergebnisse automatisch wieder umgerechnet werden? mit .tofixed() komm ich nicht zu dem gewünschten Ergebnis Confused Bin schon froh, dass ich den Code größtenteils nachvollziehn kann.

Liebe Grüße, Spach
Zitieren
#5
Hi,
mit den Bezug von Daten gibt leider nur kostenpflichtige Angebote, da die Daten aufwendig berechnet und generiert werden. Ein Fehler könnte der Datenfirmen/Dienstanbieter sehr, sehr tuer werden und deswegen enstehen sehr hohe Kosten. Hier eine Liste von Anbieter: https://geekflare.com/de/best-currency-exchange-apis/

Aber es gibt auch von öffentlichen Stellen Daten. Wie weit diese eingeschränkt sind kann ich dir leider nicht sagen.
https://www.bundesbank.de/de/statistiken...elle-daten

Viel Erfolg

rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste