✔ Problem mit background eines Dropdown in FF und IE

Hi Maik!

Vielleicht kann ich es noch ein bisscehn modifizieren. Ich werde die Funktion GoGreen2() noch mit einem Parameter ausstatten, der vom Hauptprogramm mit übergeben wird. z.B. onChange="GoGreen2("Wurffeld1");
Somit müssen nicht alle drei for-Schleifen durchlaufen werden, sondern es reicht nur ein Befehl. Somit bessere Performance, Zeitersparnis und Rechenleistungsersparnis, da das HTML-Dokument aus 50 Tabellenzeilen besteht und nicht wie bei mir im Beispiel nur aus einer bzw. zwei.

Mal sehen, ob das so funktionieren wird.

Viele Grüße,
nic1981
 
Hallo Zusammen!

So, dass Problem mit der Dartsellung der Hintergrundfarben in Firefox und Internet Explorer ist nun positiv gelöst!
Folgende Lösung inkl. Code.

Der HTML Code einer Tabellenzeile von sehr vielen (es werden bestimmt 50 solcher werden):
In jeder neuen Zeile werden die Namen von mir einfach erhöht (also Eingabe1, Eingabe2, Eingabe3,...) damit es keine Verwechslungen im Quelltext gibt.
Gleichermaßen können die Felder exakt angesprochen werden.

HTML: 
<body text="#FFFFFF" bgcolor="#000000" style="font-family:Verdana" onLoad="GoGreenStart()">
...
<form name="HerrenErgebnisse" method="get" action="<?php $_SERVER['PHP_SELF'];?>" >
...
...
<tr>
    <th id="id1"><?php $id=1;?>Spielername</th>
    <td  width="70"><select size="1" name="SpieltagID1" id="SpieltagID1" onChange="GoGreenSpieltag('SpieltagID1')">
                 <option id="a" value="s0">Spieltag</option>
                 <?php include '../../include-files/Dropdown.php';?>
         </select>
    </td>
    <td width="70" ><select name="Wurffeld1" id="Wurffeld1" size="1" onChange="GoGreenWurffeld('Wurffeld1')">
                 <option id="a" value="0" >W&uuml;rfe</option>
                 <option id="b" value="100">100</option>
                 <option id="b" value="200">200</option>
         </select>
    </td>
    <td>Ergebnis: <input type="text" maxlength="4" size="5" id="Eingabe1" name="Eingabe1" onKeyup="GoGreenErgebnis('Eingabe1')"> </td>
    <td id="klein"><?php include '../../include-files/LetzterSpieltag.php';?></td>
    <?php include '../../include-files/BilderOKNotOkEintrag.php';?>
</tr>
...
...
</form>
</body>

Bei jedem input Feld (input oder select) werden die Namen des Feldes als String mit an eine Javascript Funktion übergeben.
Diese kann dann das Feld entsprechend den Einträgen rot oder grün erscheinen lassen.
Im Body werden alle Formularfelder entsprechend ihrer Einträge ebenfalls über eine Javascript-Funktion gefärbt. ( GoGreenStart() ).

Nun die Javascript Funktionen:

Code: 
function GoGreenSpieltag(Inhalt){

             FeldA = Inhalt;
                if(window.document.getElementById(FeldA).value == "s0"){
                    window.document.getElementById(FeldA).style.backgroundColor="#F82811"; //Rot


                }
                else{
                     window.document.getElementById(FeldA).style.backgroundColor="#11FE02";   //Gruen

                }
      }
      
      function GoGreenWurffeld(Inhalt){

             FeldB = Inhalt;
                if(window.document.getElementById(FeldB).value > 0){
                    window.document.getElementById(FeldB).style.backgroundColor="#11FE02"; //Gruen


                }
                else{
                     window.document.getElementById(FeldB).style.backgroundColor="#F82811";   //Rot

                }
      }
      
      function GoGreenErgebnis(Inhalt){
      
               FeldC = Inhalt;

                if(window.document.getElementById(FeldC).value==""){
                    window.document.getElementById(FeldC).style.backgroundColor="#F82811";

                }
                else{

                     window.document.getElementById(FeldC).style.backgroundColor="#11FE02";
                }
      }


      function GoGreenStart(){
           Anzahl = window.document.HerrenErgebnisse.length;
               for(var zaehler = 0; zaehler < Anzahl-1; zaehler++){
                   if(window.document.HerrenErgebnisse.elements[zaehler].value=="" || window.document.HerrenErgebnisse.elements[zaehler].value == "s0" || window.document.HerrenErgebnisse.elements[zaehler].value==0){
                       window.document.HerrenErgebnisse.elements[zaehler].style.backgroundColor="#F82811"; //Rot
                   }
                   else{
                        window.document.HerrenErgebnisse.elements[zaehler].style.backgroundColor="#11FE02"; //Gruen
                   }
               }
      }

Somit kann man sich CSS beim Färben der Formularfelder sparen, bzw. man muss es sich sogar sparen, da es bei den beiden Browsern anscheinend unterschiedliche Interpretaionen des CSS gibt.

So, ich hoffe, dass ich allen weiterhelfen konnte, die das gleiche Problem entdecken.

Viele Grüße,
nic1981
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück