Javascript-forum › Entwicklung › Javascript v
Formularfelder addieren und Zwischensumme ausgeben

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Baumstrukturmodus
Formularfelder addieren und Zwischensumme ausgeben
joerg.plage@web.de Offline
Junior Member
**
Beiträge: 13
Themen: 2
Registriert seit: Jan 2023
Bewertung: 0
#1
01.04.2024, 13:39
Hallo Zusammen,

für einige ist mein Problem bestimmt eine Übung zum warm werden, dennoch für mich ein riesen Berg Big Grin 

Meine Familie und ich golfen für unser Leben gern an der Wii. Nach dem unsere Wii-U den Geist aufgegeben hat (CD-ROM im A*****) sind wir umgestiegen auf die Wii-Switch. Auf der 'U' gab es eine grafische Darstellung für den Fortschritt oder auch Rückschritt.auf der Switsh nicht. so habe
diese Funktion im Browser nachgebaut. (Super, funktioniert prima). die erste und zweite Hälfte  kann eingegben werden und wird dann in einer
MarieDB Tabelle gespeichert.


Nun möchte die einzelnen Ergebnis pro Loch speichern und da fängt mein Problem an. Ich habe ein Formular mit 18 Eingabefeldern (jeweil 9 pro Hälfte)
Ich möchte eine zwischenbilanz für die aktuelle Hälfte die nur angezeigt werden soll. das wollte ich mit JS machen, da es nicht gespeichert werden soll.

ein 'nice to have' : negative Ergenisse wollte ich in blau anzeigen z.B. -1 ein Paar in schwarz (0) und über Paar, also z.B eine 1, in rot.

vielen Dank für die Hilfe und Gruß Jörg

PS: ich habe den geposteten Text auch als Datei angehängt

Code:
<?php
    include("config.inc.php");
?>
<html>
    <head>
        <title>Eingabeformular</title>
        <style>
            .demo {
                border:1px solide #C0C0C0;
                border-collapse:Zusammenbruch;
                padding:5px;
            }
            .demo th {
                border:1px solide #C0C0C0;
                padding:5px;
                background:#F0F0F0;
            }
            .demo td {
                border:1px solide #C0C0C0;
                padding:5px;
            }
            input.g1 {
                color:#000000;
                background : #FFFFFF;
                border : 1px solid #FFFFFF
            }
            input#g1:focus {
                color:grey;
                background : #0000000;
            }
        </style>
        <script type="text/javascript">
            function hintergrund() {
                if (document.getElementById('g1').value == "") {
                    document.getElementById('g1').style.backgroundColor="#FFFFFF";
                } else (document.getElementkById('g1').value == '-1') {
                    document.getElementById('g1').style.backgroundColor="blue";
                }
            }
            function ersteHaelfte(player) {
                let player0 = 0;
                for (let i = 1; i < 10; i++) {
                    let player+i = document.getElementById(player+i).value;
                }
                let player+z1 = player9;
            }
            document.getElementById('volume').addEventListener('gz1', ersteHaelfte);
        </script>
    </head>
    <body>
    <form method="POST" action="">
        <input name="datum" type="hidden" style="width: 120px" value="<?php echo date('Y-m-d');?>" />
            <table class="demo">
                <caption>Ergebnis 18ner Hole <?php echo date('d.m.Y');?></caption>
                <thead>
                    <tr>
                        <th><br></th>
                        <th>1</th>    
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                        <th>6</th>
                        <th>7</th>
                        <th>8</th>
                        <th>9</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Gabi <br></td>
                        <td><input autofocus name="g1" type="text" style="width: 40px" tabindex="1" id="g1" onChange="hintergrund();ersteHaelfte('g');" value="-1" /></td>
                        <td><input name="g2" type="text" style="width: 40px" tabindex="4" id="g2" onChange="hintergrund();ersteHaelfte('g');" value="-1" /></td>
                        <td><input name="g3" type="text" style="width: 40px" tabindex="7" id="g3" onChange="hintergrund();ersteHaelfte('g');" value="-1" /></td>
                        <td><input name="g4" type="text" style="width: 40px" tabindex="10" id="g4" onChange="hintergrund();ersteHaelfte('g');" value="-1" /></td>
                        <td><input name="g5" type="text" style="width: 40px" tabindex="13" id="g5" onChange="hintergrund();ersteHaelfte('g');" value="-1" /></td>
                        <td><input name="g6" type="text" style="width: 40px" tabindex="16" id="g6" onChange="hintergrund();ersteHaelfte('g');" value="-1" /></td>
                        <td><input name="g7" type="text" style="width: 40px" tabindex="19" id="g7" onChange="hintergrund();ersteHaelfte('g');" value="-1" /></td>
                        <td><input name="g8" type="text" style="width: 40px" tabindex="22" id="g8" onChange="hintergrund();ersteHaelfte('g');" value="-1" /></td>
                        <td><input name="g9" type="text" style="width: 40px" tabindex="25" id="g9" onChange="hintergrund();ersteHaelfte('g');" value="-1" /></td>
                        <td><input disabled name="gz1" type="text" style="width: 40px" id="gz1" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Kai</td>
                        <td><input name="k1" type="text" style="width: 40px" tabindex="2" id="k1" onChange="hintergrund();ersteHaelfte('k');" value="-1" /></td>
                        <td><input name="k2" type="text" style="width: 40px" tabindex="5" id="k2" onChange="hintergrund();ersteHaelfte('k');" value="-1" /></td>
                        <td><input name="k3" type="text" style="width: 40px" tabindex="8" id="k3" onChange="hintergrund();ersteHaelfte('k');" value="-1" /></td>
                        <td><input name="k4" type="text" style="width: 40px" tabindex="11" id="k4" onChange="hintergrund();ersteHaelfte('k');" value="-1" /></td>
                        <td><input name="k5" type="text" style="width: 40px" tabindex="14" id="k5" onChange="hintergrund();ersteHaelfte('k');" value="-1" /></td>
                        <td><input name="k6" type="text" style="width: 40px" tabindex="17" id="k6" onChange="hintergrund();ersteHaelfte('k');" value="-1" /></td>
                        <td><input name="k7" type="text" style="width: 40px" tabindex="20" id="k7" onChange="hintergrund();ersteHaelfte('k');" value="-1" /></td>
                        <td><input name="k8" type="text" style="width: 40px" tabindex="23" id="k8" onChange="hintergrund();ersteHaelfte('k');" value="-1" /></td>
                        <td><input name="k9" type="text" style="width: 40px" tabindex="26" id="k9" onChange="hintergrund();ersteHaelfte('k');" value="-1" /></td>
                        <td><input disabled name="kz1" type="text" style="width: 40px" id="kz1" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Jörg</td>
                        <td><input name="j1" type="text" style="width: 40px" tabindex="3" id="j1" onChange="hintergrund();ersteHaelfte('j');" value="-1" /></td>
                        <td><input name="j2" type="text" style="width: 40px" tabindex="6" id="j2" onChange="hintergrund();ersteHaelfte('j')" value="-1" /></td>
                        <td><input name="j3" type="text" style="width: 40px" tabindex="9" id="j3" onChange="hintergrund();ersteHaelfte('j')" value="-1" /></td>
                        <td><input name="j4" type="text" style="width: 40px" tabindex="12" id="j4" onChange="hintergrund();ersteHaelfte('j')" value="-1" /></td>
                        <td><input name="j5" type="text" style="width: 40px" tabindex="15" id="j5" onChange="hintergrund();ersteHaelfte('j')" value="-1" /></td>
                        <td><input name="j6" type="text" style="width: 40px" tabindex="18" id="j6" onChange="hintergrund();ersteHaelfte('j')" value="-1" /></td>
                        <td><input name="j7" type="text" style="width: 40px" tabindex="21" id="j7" onChange="hintergrund();ersteHaelfte('j')" value="-1" /></td>
                        <td><input name="j8" type="text" style="width: 40px" tabindex="24" id="j8" onChange="hintergrund();ersteHaelfte('j')" value="-1" /></td>
                        <td><input name="j9" type="text" style="width: 40px" tabindex="27" id="j9" onChange="hintergrund();ersteHaelfte('j')" value="-1" /></td>
                        <td><input disabled name="jz1" type="text" style="width: 40px" id="jz1" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <th><br></th>
                        <th>10</th>
                        <th>11</th>
                        <th>12</th>
                        <th>13</th>
                        <th>14</th>
                        <th>15</th>
                        <th>16</th>
                        <th>17</th>
                        <th>18</th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tr>
                        <td>Gabi <br></td>
                        <td><input name="g10" type="text" style="width: 40px" tabindex="28" id="g10" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="g11" type="text" style="width: 40px" tabindex="31" id="g11" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="g12" type="text" style="width: 40px" tabindex="34" id="g12" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="g13" type="text" style="width: 40px" tabindex="37" id="g13" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="g14" type="text" style="width: 40px" tabindex="40" id="g14" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="g15" type="text" style="width: 40px" tabindex="43" id="g15" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="g16" type="text" style="width: 40px" tabindex="46" id="g16" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="g17" type="text" style="width: 40px" tabindex="49" id="g17" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="g18" type="text" style="width: 40px" tabindex="52" id="g18" onChange="hintergrund();" value="-1" /></td>
                        <td><input disabled name="gz2" type="text" style="width: 40px" id="gz2" /></td>
                        <td><input disabled name="gg" type="text" style="width: 40px" id="gg"  /></td>
                    </tr>
                    <tr>
                        <td>Kai</td>
                        <td><input name="k10" type="text" style="width: 40px" tabindex="29" id="k10" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="k11" type="text" style="width: 40px" tabindex="32" id="k11" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="k12" type="text" style="width: 40px" tabindex="35" id="k12" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="k13" type="text" style="width: 40px" tabindex="38" id="k13" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="k14" type="text" style="width: 40px" tabindex="41" id="k14" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="k15" type="text" style="width: 40px" tabindex="44" id="k15" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="k16" type="text" style="width: 40px" tabindex="47" id="k16" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="k17" type="text" style="width: 40px" tabindex="50" id="k17" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="k18" type="text" style="width: 40px" tabindex="53" id="k18" onChange="hintergrund();" value="-1" /></td>
                        <td><input disabled name="kz2" type="text" style="width: 40px" id="gz2" /></td>
                        <td><input disabled name="kg" type="text" style="width: 40px" id="gg"  /></td>
                    </tr>
                    <tr>
                        <td>Jörg</td>
                        <td><input name="j10" type="text" style="width: 40px" tabindex="30" id="j10" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="j11" type="text" style="width: 40px" tabindex="33" id="j12" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="j12" type="text" style="width: 40px" tabindex="36" id="j12" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="j13" type="text" style="width: 40px" tabindex="39" id="j13" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="j14" type="text" style="width: 40px" tabindex="42" id="j14" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="j15" type="text" style="width: 40px" tabindex="45" id="j15" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="j16" type="text" style="width: 40px" tabindex="48" id="j16" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="j17" type="text" style="width: 40px" tabindex="51" id="j17" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="j18" type="text" style="width: 40px" tabindex="54" id="j18" onChange="hintergrund();" value="-1" /></td>
                        <td><input disabled name="jz2" type="text" style="width: 40px" id="jz2" /></td>
                        <td><input disabled name="jg" type="text" style="width: 40px" id="jg"  /></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td colspan="18"><input name="speichern_18" type="submit" value="speichern"  tabindex="55"/> </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                <tbody>
            </table>
            <table class="demo">
                <caption>Ergebnis 3er Spezial <?php echo date('d.m.Y');?></caption>
                <thead>
                    <tr>
                        <th><br></th>
                        <th>1</th>    
                        <th>2</th>
                        <th>3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Gabi <br></td>
                        <td><input name="gs1" type="text" style="width: 40px" tabindex="56" id="g1" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="gs2" type="text" style="width: 40px" tabindex="59" id="g1" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="gs3" type="text" style="width: 40px" tabindex="62" id="g1" onChange="hintergrund();" value="-1" /></td>
                    </tr>
                    <tr>
                        <td>Kai</td>
                        <td><input name="ks1" type="text" style="width: 40px" tabindex="57" id="g1" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="ks2" type="text" style="width: 40px" tabindex="60" id="g1" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="ks3" type="text" style="width: 40px" tabindex="63" id="g1" onChange="hintergrund();" value="-1" /></td>
                    </tr>
                    <tr>
                        <td>Jörg</td>
                        <td><input name="js1" type="text" style="width: 40px" tabindex="58" id="g1" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="js2" type="text" style="width: 40px" tabindex="61" id="g1" onChange="hintergrund();" value="-1" /></td>
                        <td><input name="js3" type="text" style="width: 40px" tabindex="64" id="g1" onChange="hintergrund();" value="-1" /></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td colspan="4"><input name="speichern_sp" type="submit" value="speichern"  tabindex="65"/> </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                <tbody>
            </table>
        </form>
    </body>
</html>
<?php
    if ( isset ($_POST["speichern_sp"]) ) {
        $into = "";
        $value = "";
        for ($i = 1; $i <= 3; $i++) {
            if ( $into == "" ) {
                $into = "g".$i.",k".$i.",j".$i;
            } else {
                $into .= ",g".$i.",k".$i.",j".$i;
            }
            if ($value == "") {
                $value = $_POST["gs".$i].",".$_POST["ks".$i].",".$_POST["js".$i];
            } else {
                $value .= ",".$_POST["gs".$i].",".$_POST["ks".$i].",".$_POST["js".$i];
            }
        }
        $sql = 'INSERT INTO tbl_spezial
                            (datum, '.$into.')
                     VALUES
                            ("'.$_POST["datum"].'", '.$value.');';
        // echo $sql;
        $db_stat = $db->prepare( $sql );
        $db_stat->execute();
    }
// ***************************
    if ( isset ($_POST["speichern_18"]) ) {
        $into = "";
        $value = "";
        for ($i = 1; $i <= 18; $i++) {
            if ( $into == "" ) {
                $into = "g".$i.",k".$i.",j".$i;
            } else {
                $into .= ",g".$i.",k".$i.",j".$i;
            }
            if ($value == "") {
                $value = $_POST["g".$i].",".$_POST["k".$i].",".$_POST["j".$i];
            } else {
                $value .= ",".$_POST["g".$i].",".$_POST["k".$i].",".$_POST["j".$i];
            }
        }
        $sql = 'INSERT INTO tbl_18_loch
                            (datum, '.$into.')
                     VALUES
                            ("'.$_POST["datum"].'", '.$value.');';
        // echo $sql;
        $db_stat = $db->prepare( $sql );
        $db_stat->execute();
        $gc1 = 0;
        $gc2 = 0;
        $kc1 = 0;
        $kc2 = 0;
        $jc1 = 0;
        $jc2 = 0;
        for ($i = 1; $i <= 9; $i++) {
            $gc1 = $gc1 + $_POST["g".$i];
            $kc1 = $kc1 + $_POST["k".$i];
            $jc1 = $jc1 + $_POST["j".$i];
        }
        for ($i = 10; $i <= 18; $i++) {
            $gc2 = $gc2 + $_POST["g".$i];
            $kc2 = $kc2 + $_POST["k".$i];
            $jc2 = $jc2 + $_POST["j".$i];
        }
        $sql = 'INSERT INTO tbl_ergebnis
                            (datum, gc1, gc2, kc1, kc2, jc1, jc2, cort, konsole)
                     VALUES
                            ("'.$_POST["datum"].'", "'.$gc1.'", "'.$gc2.'","'.$kc1.'", "'.$kc2.'", "'.$jc1.'",
                             "'.$jc2.'", "4", "s");';
        // echo $sql;
        $db_stat = $db->prepare( $sql );
        $db_stat->execute();
    }
?>


Angehängte Dateien
.php   neu_test.php (Größe: 14,53 KB / Downloads: 1)
Suchen Bewerten
Zitieren
Sempervivum Offline
Member
***
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung: 10
#2
01.04.2024, 18:18
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:
Zitat: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.
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Suchen Bewerten
Zitieren
Sempervivum Offline
Member
***
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung: 10
#3
01.04.2024, 20:00
PPS: Dies hatte ich zunächst überlesen:
Zitat:ein 'nice to have' : negative Ergenisse wollte ich in blau anzeigen z.B. -1 ein Paar in schwarz (0) und über Paar, also z.B eine 1, in rot.
Da ich mit den Spielregeln vom Golf nicht so vertraut bin, war mir nicht bewusst, dass auch eine -1 möglich ist. Da man sich mit CSS nicht auf den aktuellen Inhalt eines Elementes beziehen kann, wirst Du das wohl mit Javascript erledigen müssen. Die forEach-Schleife ist in meinem Code ja schon vorhanden, da brauchst Du nur, abhängig vom value, eine Klasse zu setzen und im CSS die Farbe zuzuweisen.
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Suchen Bewerten
Zitieren
joerg.plage@web.de Offline
Junior Member
**
Beiträge: 13
Themen: 2
Registriert seit: Jan 2023
Bewertung: 0
#4
01.04.2024, 21:07
kurz zum zählen der Schläge beim Golf.

Jedes Loch hat eine Angabe mit wieviel Schlägen das loch geschlagen werden sollte.
Ist also ein Loch mit Paar 3 angegeben, so wird das Loch mit 0 bewertet wenn man 3 Schläge benötigt.
Benötigt man aber nur 2 Schläge so ist man 1 unter Paar das entspricht -1 (Birdy)
Wird sogar ein "Hole in One" geschlagen, also abschlagen und lochen so ist das dann eine -2 (Eagle).
Es geht natürlich auch 1 über Paar das wäre ein Boggy oder mehr.
Suchen Bewerten
Zitieren
Sempervivum Offline
Member
***
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung: 10
#5
01.04.2024, 21:32
Danke für die Erklärung. Das könnte man ja auch automatisieren wenn man das Paar vorgibt. Dann brauchte man nur noch die Anzahl der Schläge einzugeben.
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Suchen Bewerten
Zitieren
joerg.plage@web.de Offline
Junior Member
**
Beiträge: 13
Themen: 2
Registriert seit: Jan 2023
Bewertung: 0
#6
02.04.2024, 12:02
Code:
inputsInRow.forEach(input => {
    sum += parseInt(input.value);
});

Mahlzeit zusammen,

und vielen dank für die Hilfe
ich habe die Bedingung raus genommen, es soll ja alles gezählt werden.

und es funktioniert super (Danke Danke Danke Danke Danke Danke )

das Paar ist nicht das erstrebte Ziel (auf der Switsh schon garnicht Big Grin ) und in der Regel schlagen wir Birdys also -1.
Suchen Bewerten
Zitieren
joerg.plage@web.de Offline
Junior Member
**
Beiträge: 13
Themen: 2
Registriert seit: Jan 2023
Bewertung: 0
#7
03.04.2024, 09:38
noch mal hallo,

über CSS habe dem input-element einen Style verpasst.

input[type="text"] {
  color:#0099FF;
  background : #FFFFFF;
  border : 1px solid #000000
}

Standardmässig soll das Feld so darstellt werden. 

Code:
<input name="g1" type="text" style="width: 40px" tabindex="1" id="g1" onChange="hintergrund();" value="-1" />

Wenn sich der Wert ändert ->

Code:
function hintergrund() {
    if (document.getElementkById('g1').value < '0') {
        document.getElementById('g1').style.Color="#00CC99";
    } else if (document.getElementkById('g1').value == '0') {
        document.getElementById('g1').style.Color="#000000";
    } else if (document.getElementkById('g1').value > '0') {
        document.getElementById('g1').style.Color="#FF3300";
    }
}

Mach einen Denkfehler oder ..... ?
Suchen Bewerten
Zitieren
Sempervivum Offline
Member
***
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung: 10
#8
03.04.2024, 11:09
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)
Suchen Bewerten
Zitieren
joerg.plage@web.de Offline
Junior Member
**
Beiträge: 13
Themen: 2
Registriert seit: Jan 2023
Bewertung: 0
#9
03.04.2024, 12:29
noch danke ,
das ist doch immer wieder absolut faszinierend!!! Big Grin

Kaum macht man es richtig, schon funktioniert es.

noch eine kleine Anmerkung -  Cool


Code:
<tr>
<td>Gabi <br></td>
<td><input name="g10" type="text" style="width: 40px" tabindex="28" id="g10" onChange="hintergrund();" value="-1" /></td>
<td><input name="g11" type="text" style="width: 40px" tabindex="31" id="g11" onChange="hintergrund();" value="-1" /></td>
<td><input name="g12" type="text" style="width: 40px" tabindex="34" id="g12" onChange="hintergrund();" value="-1" /></td>
<td><input name="g13" type="text" style="width: 40px" tabindex="37" id="g13" onChange="hintergrund();" value="-1" /></td>
<td><input name="g14" type="text" style="width: 40px" tabindex="40" id="g14" onChange="hintergrund();" value="-1" /></td>
<td><input name="g15" type="text" style="width: 40px" tabindex="43" id="g15" onChange="hintergrund();" value="-1" /></td>
<td><input name="g16" type="text" style="width: 40px" tabindex="46" id="g16" onChange="hintergrund();" value="-1" /></td>
<td><input name="g17" type="text" style="width: 40px" tabindex="49" id="g17" onChange="hintergrund();" value="-1" /></td>
<td><input name="g18" type="text" style="width: 40px" tabindex="52" id="g18" onChange="hintergrund();" value="-1" /></td>
<td><input class="sum" disabled name="gz2" type="text" style="width: 40px" id="gz2" /></td>
<!--<td><input disabled name="gg" type="text" style="width: 40px" id="gg"  /></td> -->
</tr>


Solange ich die letzte Zelle aus kommentiere funktioniert auch die Summe für die 2. Hälfte 

Danke und Gruß Jörg
Tach auch,

und noch mal .    

Sobald ich das erste Eingabefeld editiere, werden die anderen von blau zu grün umgestellt,

Zum Element gibt es eine zusätzlichen Eigenschaft "color: rgb(0, 204, 153);".

Beim Starten der Seite ich diese Elementeigenschaft nicht da.

Wo kommt die her und vor allen Dingen , wie kann ich die Abstellen?

Danke und Gruß Jörg
Suchen Bewerten
Zitieren
Sempervivum Offline
Member
***
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung: 10
#10
03.04.2024, 17:49
Zitat:Sobald ich das erste Eingabefeld editiere, werden die anderen von blau zu grün umgestellt,

Zum Element gibt es eine zusätzlichen Eigenschaft "color: rgb(0, 204, 153);".

Beim Starten der Seite ich diese Elementeigenschaft nicht da.

Wo kommt die her und vor allen Dingen , wie kann ich die Abstellen?
Diese Eigenschaft wird durch das Javascript eingestellt. Es bearbeitet alle Zellen einer Zeile und stellt für die Textfarbe grün ein wenn der Wert <0 ist. Ich vermute, Du möchtest, dass alle Zellen, wo noch nichts manuell eingegeben wurde, blau bleiben?

Zitat:Solange ich die letzte Zelle aus kommentiere funktioniert auch die Summe für die 2. Hälfte 
Wie ist das zu verstehen? Wahrscheinlich hat die letzte Zelle ja einen Sinn aber ich weiß noch nicht, welchen. Die Summe aller Zeilen von 1 bis 18?  Besteht hier noch Handlungsbedarf?
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Suchen Bewerten
Zitieren


Gehe zu:


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