Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Formularfelder addieren und Zwischensumme ausgeben
#8
Hallo zurück!

Als erstes sehe ich da einen Schreibfehler:
getElementkById

Außerdem unterscheidet Javascript Groß- und Kleinschreibung: style.Color gibt es nicht, es muss style.color heißen.

Und dann wiederhole ich meine Empfehlung, auf die Inline-Notation der Eventlistener zu verzichten und das Setzen der Farben in dem Code von mir zu integrieren:
Code:
    <script>
    // Abschicken des Formulars durch Drücken von Enter unterdrücken:
    window.addEventListener('change', event => {
        if (event.target.matches('table input'))
            event.preventDefault();
    });

    // Eventlistener für Eingabe irgend wo auf der Seite registrieren:
    window.addEventListener('input', event => {
        const
            // Die Tabellenzeile, in der sich das Element befindet, ermitteln:
            row = event.target.closest('tr');
        // Wurde eine Tabellenzeile gefunden?
        if (row) {
            const
                // Das Feld für die Summe in dieser Zeile bereit stellen:
                sumField = row.querySelector('.sum'),
                // Die Eingabefelder in dieser Zeile bereit stellen:
                inputsInRow = row.querySelectorAll('input');

            // Schriftfarbe abhängig vom Wert einstellen:
            function setColor(input, val) {
                if (val < 0) {
                    input.style.color = "#00CC99";
                } else if (val == 0) {
                    input.style.color = "#000000";
                } else if (val > 0) {
                    input.style.color = "#FF3300";
                }
            }
            // Summe über die zuletzt bereit gestellten Eingabefelder
            // ermitteln:
            let
                sum = 0;
            inputsInRow.forEach(input => {
                const
                    // Zunächst den eingegebenen Wert
                    // als Integer bereit stellen:
                    val = parseInt(input.value);
                // Wenn es sich nicht um ein Summenfeld selber handelt:
                // Wert auf die Summe aufaddieren:
                if (!input.classList.contains('sum')) sum += parseInt(input.value);
                setColor(input, val);
            });
            // Summe in das Ausgabefeld eintragen:
            sumField.value = sum;
            setColor(sumField, sum);
        }
    });
    </script>
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Zitieren


Nachrichten in diesem Thema
RE: Formularfelder addieren und Zwischensumme ausgeben - von Sempervivum - 03.04.2024, 11:09

Gehe zu:


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