Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Interagierende Inputfelder
#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


Nachrichten in diesem Thema
Interagierende Inputfelder - von Spachinger - 31.01.2023, 14:36
RE: Interagierende Inputfelder - von rzscout - 31.01.2023, 16:12
RE: Interagierende Inputfelder - von Spachinger - 01.02.2023, 02:09
RE: Interagierende Inputfelder - von Spachinger - 01.02.2023, 11:28
RE: Interagierende Inputfelder - von rzscout - 01.02.2023, 19:08

Gehe zu:


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