pixwiz: Javascript /CSS Zellenhintergrund nach Inhalt verändern

Hallo Gemeinde,

ich bastle seit einiger Zeit an einer Kalkulationsanwendung, das was funktionieren soll, tut es auch, bis auf eine Sache, die ich irgendwie nicht gelöst bekomme. Das Prinzip ist mir mittlerweile zwar klar, aber anscheinend mache ich irgendwo den berühmten "Häckchenfehler"...

Das ganze Teil gibt es bereits schon als eigenständige Software, allerdings hab ich da andere Tools verwendet - auf jeden Fall kann ich damit aber meine Rechenwerte vergleichen und das ein oder andere konnte ich auch relativ schnell für Javascript ableiten. Wahrscheinlich noch verbesserungswürdig, aber für meine Zwecke soll es erstmal reichen.

Um was es geht: die berechneten Werte werden in einer Tabelle ausgegeben, das funktioniert soweit auch und auch dynamisch, d. h. ändert sich ein Wert, passen sich die Werte in der Tabelle auch an.
Dafür zuständig ist eine Funktion "auscal".
Für die Werteausgabe habe ich die Ergebnisse per innerHTML und entsprechender ID in die Zellen geschrieben, passt auch soweit.

Vielleicht erstmal die Funktion, die die Hintergrundfarbe abhängig vom Wert ändern soll:

<script>  
function HGF() {  
    var fsval = parseInt(document.getElementById('fsval').value);  
	var mwval = parseInt(document.getElementById('mwval').value);  
	var mp = (fsval * 2) + mwval;  
	var ip = document.getElementsByClassName('fd');  
    if (mp - ip < 0) {  
        document.getElementsByClassName('fd').style.backgroundColor = 'red';  
    }  
    else if (ip - mp < 0) {  
        document.getElementsByClassName('fd').style.backgroundColor = 'green';  
    }  
	else {  
		document.getElementsByClassName('fd').style.backgroundColor = 'blue';  
	}  
	test1.innerHTML = mp;  
	test2.innerHTML = ip;  
}  
</script>

Da ich den mp eigentlich ja schon an anderer Stelle ermittelt habe (aus fsval und mwval), ging ich davon aus, das es genügt, in dieser Funktion einfach die Werte nochmal aus dem Dokument zu holen.
Dann soll der Vergleich erfolgen, das Script soll also bei allen Klassen "fd" den Wert auslesen, mit der Variablen "mp" vergleichen - ist der Wert in der Tabelle größer, soll der Hintergrund Grün werden, ist der Wert in der Tabelle kleiner, entsprechend Rot. Falls identisch, soll der Zellenhintergrund Weiß bleiben.

Ich wäre für Hinweise, wo ich da den Denkfehler mache, sehr dankbar, muss auch beifügen, das ich schon seeeeeehr lange nicht mehr mit Javascript (auf Kreisklasseniveau) gearbeitet habe und da doch gewaltig Staub im Gebälk ist.

Der Style greift auf jeden Fall, das hab ich mit der Schrift getestet.

Ein weiterer Ansatz wäre vielleicht, die funktionierende Funktion in diese zu integrieren um dann Zugriff auf die Variablen zu haben...?
Oder einfach die Funktion - nach - der Tabelle aufrufen?
Steh leider ein bischen auf dem Schlauch und nehme Schubser in die richtige Richtung garantiert nicht übel ;)

So long!

  1. Hallo,

    <script>

    function HGF() {
        var fsval = parseInt(document.getElementById('fsval').value);
    var mwval = parseInt(document.getElementById('mwval').value);
    var mp = (fsval * 2) + mwval;
    var ip = document.getElementsByClassName('fd');
        if (mp - ip < 0) {
            document.getElementsByClassName('fd').style.backgroundColor = 'red';
        }
        else if (ip - mp < 0) {
            document.getElementsByClassName('fd').style.backgroundColor = 'green';
        }
    else {
    document.getElementsByClassName('fd').style.backgroundColor = 'blue';
    }
    test1.innerHTML = mp;
    test2.innerHTML = ip;
    }
    </script>

    
    >   
      
    Was mir auf den allerersten Blick arg suspekt erscheint ist, dass ip nur mit document.getElementsByClassName gefüllt ist. Also mehr oder weniger einer Collection von Elementen.  
    Und im nächsten Schritt willst du von mp diese Collection abziehen?  
    Ich glaube da fehlt noch ein Bearbeitungsschritt ala "hole aus den gefundenen Elementen den Wert oder die Werte, die ich brauche"  
      
    vermutlich brauchst du ne schleife die durch die gefundenen Elemente durch iteriert und sich den Wert anschaut der drin steht und mit mp vergleicht und dann dieses element entsprechend färbt.  
      
      
    martachen
    
    1. Hallo,

      ja, nach dem Schubs leuchtet der Denkfehler ein...wenn ich das soweit richtig verstehe, KANN ich auf diese Weise nichts vergleichen, weil das Script nicht unterscheiden kann, was es aus der Masse der Werte vergleichen soll... (es sind insgesamt 50 Werte, alle unterschiedlich und müssen gegen "mp" verglichen werden.
      Das Script an sich würde aber schon grundsätzlich funktionieren?

      Werde wohl nochmal auf Null zurück und mit einen anderen Ansatz überlegen...eventuell diesen gewünschten Farbwechsel gleich mit in die Berechnungsfunktion reinbasteln...vielleicht nicht elegant, aber der Lerneffekt ist mir grad auch wichtig.
      Oder ich lege erstmal die ganzen Funktionen zusammen, derzeit hab ich die an den jeweiligen Stellen aufgesplittet und drüber gestolpert, das ich auf die Weise ja keine "globalen" Variablen habe, auf die ich beliebig zugreifen kann. Mach mir also mehr arbeit, als vielleicht grad angebracht ist. Werd also erstmal auch diese Kurve glätten.

      Danke erstmal!

      1. Hallo,

        Hallo,

        ja, nach dem Schubs leuchtet der Denkfehler ein...wenn ich das soweit richtig verstehe, KANN ich auf diese Weise nichts vergleichen, weil das Script nicht unterscheiden kann, was es aus der Masse der Werte vergleichen soll... (es sind insgesamt 50 Werte, alle unterschiedlich und müssen gegen "mp" verglichen werden.

        wie gesagt in mp liegt ne Sammlung von Elementen (zu nem Element gehört ja neben dem Wert zB auch noch Style-Angaben und so vieles mehr)

        Das Script an sich würde aber schon grundsätzlich funktionieren?

        jein... (wie antwortet auf so eine Frage?) Man kann drauf aufbauen

        Werde wohl nochmal auf Null zurück und mit einen anderen Ansatz überlegen...eventuell diesen gewünschten Farbwechsel gleich mit in die Berechnungsfunktion reinbasteln...vielleicht nicht elegant, aber der Lerneffekt ist mir grad auch wichtig.
        Oder ich lege erstmal die ganzen Funktionen zusammen, derzeit hab ich die an den jeweiligen Stellen aufgesplittet und drüber gestolpert, das ich auf die Weise ja keine "globalen" Variablen habe, auf die ich beliebig zugreifen kann. Mach mir also mehr arbeit, als vielleicht grad angebracht ist. Werd also erstmal auch diese Kurve glätten.

        Ich würde nicht sagen dass du auf null zurück musst oder einen anderen Ansatz überlegen musst. Ein Anfang ist da der nun Schritt für Schritt verbessert werden muss.

        <script>  
        function HGF() {  
            var fsval = parseInt(document.getElementById('fsval').value);  
                var mwval = parseInt(document.getElementById('mwval').value);  
                var mp = (fsval * 2) + mwval;  
                var ip = document.getElementsByClassName('fd');  
        
        

        Bis hier hin erstmal ok. Ich kenne die Anwendung nicht, aber aussage kräftige NAmen für Variablen sind sinnvoll. (Wie gesagt, kenne die Anwendung nicht, vielleict ist mp, ip und co aussagekräftig).

        Punkt zum Merken: In ip ist nun eine Sammlung aller DOM-Elemente enthalten, die die Klasse fd haben.

        Was du jetzt machen willst ist bei jedem der gefundenen Elemente schauen ob der enthaltene Wert kleiner oder größer als dein Vergleichswert mp ist und anhand dieses Vergleichsergebnisses die Hintergrundfarbe ändern.

        So ab jetzt wirds spekulativ, da ich nicht weiß welche html-Elemente die Klasse fd haben.

        Um durch alle Elemente durch zu iterieren brauchst du nun eine schleife (zB eine For Schleife)

          
        var i, currentElementValue;  
          
        for(i=0; i< mp.length; i++) {  
           currentElementValue = mp[i].innerHTML // Wert auslesen (zB aus Tabellenzelle)  
                                                 // evt anders bei anderem Element  
                                                 // evt Bearbeitung wie parseInt, ParseFloat gleich  
                                                 // mitmachen  
          
        // statt ip nun auf currentElementValue zugreifen  
            if (mp - currentElementValue < 0) {  
                document.getElementsByClassName('fd').style.backgroundColor = 'red';  
            }  
            else if (currentElementValue - mp < 0) {  
                document.getElementsByClassName('fd').style.backgroundColor = 'green';  
            }  
                else {  
                        document.getElementsByClassName('fd').style.backgroundColor = 'blue';  
                }  
        } // Schleife beenden  
          
                test1.innerHTML = mp;  
                test2.innerHTML = ip;  
        }  
          
        </script>
        

        Achja mein Code ist völlig ungetestet, könnten also noch Fehler drin sein, aber um die Richtung zu geben wie es geht sollte es reichen

        Danke erstmal!

        martachen

        1. Also die Klasse "fd" ist nur für das span-Element in der Tabelle vorgesehen, in der auch die Werte stehen, die verglichen werden sollen.

          Ich werd mir heute Abend das mit der Schleife noch gerne genauer ansehen und mal damit arbeiten.

          Die Anwendung ist übrigens ein Druckvorstufenkalkulator speziell für Raster-Siebdruck, damit man alle relevanten Parameter erstens in Abhängigkeit sehen kann und zweitens bereits in der Bildbearbeitung Anpassungen vornehmen kann. Oder damit die tatsächlichen Eigenschaften eines Belichters unter Berücksichtigung der notwendigen Materialparameter beurteilen kann, bevor man sich so ein Gerät anschafft. in dem Bereich bin ich daheim, leider weniger in der eigentlichen Programmierung. Ist meistens so, dass ich schon weiß, wie es gehen müsste und meistens auch tut, nur sind meine jeweiligen Sprachkenntnisse nicht so ganz ausgeprägt, daß mir die einfachen Lösungen gleich in Auge springen. Google hilft da schon ein Stück, aber manchmal klemmts dann halt doch noch - gerade dann, wenn viele Wege nach Rom führen.

          Vielen Dank erstmal für die Wegweiser, wenn ich das fertig habe, schicke ich gern mal den Link.

          1. Soodale,
            ich hab mal eine Version des Kalkulators Online gestellt. Das ist jetzt noch nicht das Finale, aber es funktioniert soweit es soll. Da wird man wahrscheinlich vieles einfacher
            lösen können, deswegen steht für die, die es interessiert das CSS und die Scripte mit im Quelltext.

            Multitool Betaversion

            Wie gesagt, noch nicht die Finale Version, an der bastel ich mit den ganzen weiteren Hinweisen noch weiter, denn manche der Parameter (die jetzt noch nicht angezeigt werden) brauche ich noch für andere Berechnungen bzw. als Grundlage für ein Canvas-Element. Aber das wird noch ne ganz andere Nummer. Erstmal das weiter Verstehen und den Code optimieren und aufräumen ;)

            In dieser Version wird auch nicht der Zellenhintergrund geändert, sondern die Schriftfarbe. Mal sehen, ob ich das dann doch noch so lasse, ist eigentlich besser lesbar...

            Gruß,

  2. @@pixwiz:

    nuqneH

    if (mp - ip < 0) {
            document.getElementsByClassName('fd').style.backgroundColor = 'red';
        }
        else if (ip - mp < 0) {
            document.getElementsByClassName('fd').style.backgroundColor = 'green';
        }
    else {
    document.getElementsByClassName('fd').style.backgroundColor = 'blue';
    }

    Das sollte man nicht tun. Darstellungsangaben sollten nicht in der Programmlogik stehen.

    Besser: dynamisch Klassen zuweisen, die in deinem Fall "isNegative", "isPositive", "isZero" heißen könnten.

    Im Stylesheet steht dann:

    .isNegative { background-color: red   }  
    .isPositive { background-color: green }  
    .isZero     { background-color: blue  }
    

    Bei späteren Änderungswünschen muss dann nicht die Programmlogik angefasst werden, sondern nur das Stylesheet.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)