Formularfelder addieren und Zwischensumme ausgeben

[Sempervivum]

Hallo Jörg und willkommen im Forum!

Bei deinem Javascript sehe ich zunächst mal für die Zeile, die ich mit einem Pfeil markiert habe, eine Fehleranzeige in der Console:

Code:

    function hintergrund() {
        if (document.getElementById('g1').value == "") {
            document.getElementById('g1').style.backgroundColor = "#FFFFFF";
        } else(document.getElementkById('g1').value == '-1') { // <-- Hier fehlt das if
            document.getElementById('g1').style.backgroundColor = "blue";
        }
    }

Läuft ein Javascript nicht, immer als erstes einen Blick in die Console werfen, sehr häufig findest Du dort Hinweise warum es nicht geht.

Statt der inline notierten Eventlistener empfehle ich, addEventListener zu verwenden. Ich habe das mal für die erste Zeile für Gabi umgeändert:

HTML:

Code:

                <tr>
                    <td>Gabi <br></td>
                    <td><input autofocus name="g1" type="text" style="width: 40px" tabindex="1" id="g1" value="-1" />
                    </td>
                    <td><input name="g2" type="text" style="width: 40px" tabindex="4" id="g2" value="-1" /></td>
                    <td><input name="g3" type="text" style="width: 40px" tabindex="7" id="g3" value="-1" /></td>
                    <td><input name="g4" type="text" style="width: 40px" tabindex="10" id="g4" value="-1" /></td>
                    <td><input name="g5" type="text" style="width: 40px" tabindex="13" id="g5" value="-1" /></td>
                    <td><input name="g6" type="text" style="width: 40px" tabindex="16" id="g6" value="-1" /></td>
                    <td><input name="g7" type="text" style="width: 40px" tabindex="19" id="g7" value="-1" /></td>
                    <td><input name="g8" type="text" style="width: 40px" tabindex="22" id="g8" value="-1" /></td>
                    <td><input name="g9" type="text" style="width: 40px" tabindex="25" id="g9" value="-1" /></td>
                    <!-- Dem Ausgabefeld geben wir die Klass "sum" um es identifizieren zu können: -->
                    <td><input class="sum" disabled name="gz1" type="text" style="width: 40px" id="gz1" /></td>
                    <td></td>
                </tr>

Wenn Du die anderen Zeilen genau so umänderst, brauchst Du das folgende Javascript nur ein Mal für alle Tabellenzeilen.

Code:

    <script>
    // Abschicken des Formulars durch Drücken von Enter unterdrücken:
    window.addEventListener('change', event => {
        if (event.target.matches('table input'))
            event.target.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, ausgenommen
                // das Summenfeld, müssen wir bei der Ermittlung
                // der Summe berücksichtigen:
                inputsInRow = row.querySelectorAll('input:not(.sum)');
                // Summe über die zuletzt bereit gestellten Eingabefelder
                // ermitteln:
            let
                sum = 0;
            inputsInRow.forEach(input => {
                if (input.value != '-1') {
                    sum += parseInt(input.value);
                }
            });
            // Und in das Ausgabefeld eintragen:
            sumField.value = sum;
        }
    });
    </script>

Dieses Skript an das Ende des Body stellen, vor das schließende </body>.

Da ist noch einiges offen, z. B. die Tatsache, dass in dem zweiten Block zwei Ausgabefelder sind. Soll eines davon die Summe im vorigen Block aufnehmen? Und man müsste prüfen, ob die Eingabe OK ist, sonst erscheint bei einem leeren Wert oder nur "-" ein "NaN" im Ausgabefeld.
Und Du möchtest ja offenbar den Hintergrund abhängig davon einstellen, ob die Eingabe OK ist oder nicht. Das geht wesentlich einfacher als mit einem Eventlistener, ich reiche das gleich nach.

Versuche, das zunächst mal so zum Laufen zu bringen und dann die fehlenden Punkte zu ergänzen.
Und melde dich, wenn Du nicht weiter kommst.

---

PS:

Und man müsste prüfen, ob die Eingabe OK ist, sonst erscheint bei einem leeren Wert oder nur "-" ein "NaN" im Ausgabefeld.
Und Du möchtest ja offenbar den Hintergrund abhängig davon einstellen, ob die Eingabe OK ist oder nicht. Das geht wesentlich einfacher als mit einem Eventlistener, ich reiche das gleich nach.

Beides kannst Du sehr leicht erreichen, indem Du den Eingabefeldern der Typ "number" gibst. Dann ist eine Eingabe von nicht-numerischen Werten nicht möglich. Und zusätzlich am Anfang auf die Zuweisung von -1 verzichten, bzw. das value-Attribut weg lassen und statt dessen ein Attribut "placeholder" angeben.