Loopie McLoop: Javascript "switch/case" Problem

Beitrag lesen

Ohne den genauen Anwendungsfall zu kennen (weil du ihn – warum auch immer – nicht beschreiben möchtest), erscheint mir das switch-Statement hier der falsche Ansatz zu sein.

Du hast drei Units mit jeweils sechs Faktoren, die sich offensichtlich nicht ändern. Anstatt 19 (!) Variablen darauf zu verschwenden, ließe sich die Struktur als Objekt darstellen.

In deinem switch-Statement werden (unabhängig von der gewählten Unit) sechs Ausgabefelder mit neuen Werten befüllt. Der neue Wert wird in jedem Fall nach der selben Formel berechnet.

Mir scheint, als könne das ganze über einen einfachen for-Loop laufen. Kommen neue Units dazu oder ändern sich die Faktoren, muss im Script lediglich das Faktor-Objekt angepasst werden.

Ungetestetes Beispiel anbei. Das geht mit Sicherheit besser/eleganter/robuster/was-auch-immer. Ohne den genauen Anwendungsfall zu kennen, möchte ich da aber nicht mehr als ein paar Minuten investieren.

<!DOCTYPE html><html lang=de><meta charset=UTF-8><meta name=viewport content="width=device-width, initial-scale=1">

<title>Seltsamer Konverter</title>
<script type=module>

const factors = {
    'unit_1': {
        1: 1.0,
        2: 0.1,
        3: 100,
        4: 0.987,
        5: 0.00004403,
        6: 0.002097
    },
    'unit_2': {
        1: 10,
        2: 1,
        3: 1000,
        4: 9.87,
        5: 0.0004403,
        6: 0.02097
    },
    'unit_3': {
        1: 0.01,
        2: 0.001,
        3: 1,
        4: 0.00987,
        5: 0.0000004403,
        6: 0.00002097
    }
};

document.forms.convert.addEventListener('submit', function (event) {
    const
    valueSeed = event.currentTarget.elements.seed.value,
    valueUnit = event.currentTarget.elements.unit.value;

    for (let i = 1; i <= 6; i++) {
        event.currentTarget.elements[`out-${i}`].value = valueSeed * factors[`unit_${valueUnit}`][i].toFixed(4);
    }

    event.preventDefault();
});

</script>

<form id=convert>
    <div>
        <label for=seed>Startwert</label>
        <input id=seed type=number required>
    </div>
    <fieldset>
        <legend>Unit</legend>
        <div>
            <input type=radio name=unit id=unit-1 value=1 required checked>
            <label for=unit-1>Unit 1</label>
        </div>
        <div>
            <input type=radio name=unit id=unit-2 value=2 required>
            <label for=unit-2>Unit 2</label>
        </div>
        <div>
            <input type=radio name=unit id=unit-3 value=3 required>
            <label for=unit-3>Unit 3</label>
        </div>
    </fieldset>
    <fieldset>
        <legend>Ausgabe</legend>
        <div>
            <label for=out-1>Wert 1:</label>
            <output id=out-1>0</output>
        </div>
        <div>
            <label for=out-2>Wert 2:</label>
            <output id=out-2>0</output>
        </div>
        <div>
            <label for=out-3>Wert 3:</label>
            <output id=out-3>0</output>
        </div>
        <div>
            <label for=out-4>Wert 4:</label>
            <output id=out-4>0</output>
        </div>
        <div>
            <label for=out-5>Wert 5:</label>
            <output id=out-5>0</output>
        </div>
        <div>
            <label for=out-6>Wert 6:</label>
            <output id=out-6>0</output>
        </div>
    </fieldset>
    <button>konvertiere</button>
</form>