Farbänderung eines Tabellenhintergrund bei "onClick"
0 0 
Felix Riesterer
0 0 Felix Riesterer
0 0 0 0 0 0 0 0 0 0
Farbänderung eines Tabellenhintergrund bei "onClick"
Ich habe das Problem, das ich eine Gruppe von Radiobuttons habe, und je nachdem, welcher selektiert wird, sich die Hintergrundfarbe eines Tabellenfeldes ändern soll... bloß mit der Realisierung bin ich am verzweifeln :(
Ich hoffe mir kann geholfen werden,
Marcel
-
Hi,
das sollte es eigentlich schon sein:
<html>
<body>
<table>
<tr>
<td id="td_1"><input type="radio" onClick="td = document.getElementById('td_1'); td.style.backgroundColor = '#FF0000'; "></td>
</tr>
</table>
</body>
</html>MfG,
fwap -
Lieber Marcel,
Ich hoffe mir kann geholfen werden,
ja, Dir kann geholfen werden.
Ich habe das Problem, das ich eine Gruppe von Radiobuttons habe, und je nachdem, welcher selektiert wird, sich die Hintergrundfarbe eines Tabellenfeldes ändern soll... bloß mit der Realisierung bin ich am verzweifeln :(
Aber das ist doch garkein Problem! Siehst Du?*
Liebe Grüße aus Ellwangen,
Felix Riesterer.
*Falls Du _nicht_ sehen solltest, dass das garkein Problem ist, dann liegt das daran, dass sowohl Dein Quellcode, als auch mein Lösungsvorschlag jeweils unsichtbar formatiert wurden.
-
Lieber Marcel,
Ich hoffe mir kann geholfen werden,
ja, Dir kann geholfen werden.Ich habe das Problem, das ich eine Gruppe von Radiobuttons habe, und je nachdem, welcher selektiert wird, sich die Hintergrundfarbe eines Tabellenfeldes ändern soll... bloß mit der Realisierung bin ich am verzweifeln :(
Aber das ist doch garkein Problem! Siehst Du?*
Liebe Grüße aus Ellwangen,
Felix Riesterer.
*Falls Du _nicht_ sehen solltest, dass das garkein Problem ist, dann liegt das daran, dass sowohl Dein Quellcode, als auch mein Lösungsvorschlag jeweils unsichtbar formatiert wurden.
ok ... also es sieht so aus:
ich habe 2 Tabellen:
<table border="1">
<tr>
<td id="show_1"></td>
<td id="show_2"></td>
<td id="show_3"></td>
<td id="show_4"></td>
<td id="show_5"></td>
<td id="show_6"></td>
<td id="show_7"></td>
</tr>
</table><table border="1">
<tr>
<td><input type="radio" name="radio_group"></td>
<td><input type="radio" name="radio_group"></td>
<td><input type="radio" name="radio_group"></td>
<td><input type="radio" name="radio_group"></td>
<td><input type="radio" name="radio_group"></td>
<td><input type="radio" name="radio_group"></td>
<td><input type="radio" name="radio_group"></td>
</tr>
</table>Hintergrund der Seite ist weiss, der der oberen Tabelle auch. Beide haben 7 Spalten. Wenn ich nun in der unteren Tabelle einen der Radiobuttons anklick, soll sich die Hintergrundfarbe des entsprechenden oberen Tabellenfeldes in Rot ändern.
Meine Idee war ja:
onClick="document.getElementByID('show_1').style.backgroundColor='#ff0000'"
aber es scheint nicht zu funktionieren.
LG, Marcel
-
Lieber Marcel,
onClick="document.getElementByID('show_1').style.backgroundColor='#ff0000'"
Die Funktion heißt "getElementById", also mit einem "kleinen d" am Ende. Javascript ist cAsE-sEnSiTiVe!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hi,
onClick="document.getElementByID('show_1').style.backgroundColor='#ff0000'"
aber es scheint nicht zu funktionieren.
das wird wohl an dem völlig ungeeigneten Event-Handler liegen. Und Du hast kein CSS-, sondern ein Javascript-Problem...
freundliche Grüße
Ingo-
Tag Ingo.
onClick="document.getElementByID('show_1').style.backgroundColor='#ff0000'"
das wird wohl an dem völlig ungeeigneten Event-Handler liegen.Warum? Lediglich die Schreibweise der Methode ist falsch, der Rest ist zwar nicht sonderlich schön, aber funktioniert.
Siechfred
--
Everybody's going to the party have a real good time,
Dancing in the desert blowing up the sunshine.-
Tag Ingo.
onClick="document.getElementByID('show_1').style.backgroundColor='#ff0000'"
das wird wohl an dem völlig ungeeigneten Event-Handler liegen.Warum? Lediglich die Schreibweise der Methode ist falsch, der Rest ist zwar nicht sonderlich schön, aber funktioniert.
Siechfred
Ja, jetzt klappts. Ich _hasse_ Case-sensitive Sprachen. Danke trotzdem!
LG, Marcel
-
Tag Marcel.
Ja, jetzt klappts. Ich _hasse_ Case-sensitive Sprachen. Danke trotzdem!
Du solltest trotzdem Ingos verklausulierten Hinweis beherzigen und den Eventhandler onChange verwenden.
Siechfred
--
Everybody's going to the party have a real good time,
Dancing in the desert blowing up the sunshine.
-
-
Hi,
Warum? Lediglich die Schreibweise der Methode ist falsch, der Rest ist zwar nicht sonderlich schön, aber funktioniert.
nicht wenn ich meine Tastatur verwende. Warum gehen nur immer alle davon aus, daß man in Formularen (nur) mit der Maus operiert?
freundliche Grüße
Ingo-
Tag Ingo.
Warum? Lediglich die Schreibweise der Methode ist falsch, der Rest ist zwar nicht sonderlich schön, aber funktioniert.
nicht wenn ich meine Tastatur verwende.Wo hast du das hier geschrieben?
Warum gehen nur immer alle davon aus, daß man in Formularen (nur) mit der Maus operiert?
Warum gehen nur immer alle davon aus, dass jeder Fragensteller uneingeschränkt versteht, was man ihm mitteilen möchte?
Siechfred
--
Everybody's going to the party have a real good time,
Dancing in the desert blowing up the sunshine.-
Hi,
Warum gehen nur immer alle davon aus, dass jeder Fragensteller uneingeschränkt versteht, was man ihm mitteilen möchte?
nunja, wenn Nachdenken nicht reicht, kann man doch nochmal nachfragen.
freundliche Grüße
Ingo-
Tag Ingo.
Warum gehen nur immer alle davon aus, dass jeder Fragensteller uneingeschränkt versteht, was man ihm mitteilen möchte?
nunja, wenn Nachdenken nicht reicht, kann man doch nochmal nachfragen.Auch wenn wir hier in eine Grundsatzdiskussion rutschen: was wäre daran so schwer bzw. auszusetzen gewesen, unter dem Aspekt der Barrierearmut auf das besser geeignete onChange hinzuweisen? Zwei Zeilen mehr und wir hätten uns diesen Diskurs(© Cheatah) erspart :-)
Siechfred
--
Everybody's going to the party have a real good time,
Dancing in the desert blowing up the sunshine.-
Hi,
Auch wenn wir hier in eine Grundsatzdiskussion rutschen: was wäre daran so schwer bzw. auszusetzen gewesen, unter dem Aspekt der Barrierearmut auf das besser geeignete onChange hinzuweisen?
dagegen spricht, daß der IE mit onchange bei Radiobuttons nicht zurecht kommt.
freundliche Grüße
Ingo-
Tag Ingo.
dagegen spricht, daß der IE mit onchange bei Radiobuttons nicht zurecht kommt.
Das wäre mir neu, kannst du das bitte präzisieren?
Siechfred
--
Everybody's going to the party have a real good time,
Dancing in the desert blowing up the sunshine.-
Hi,
dagegen spricht, daß der IE mit onchange bei Radiobuttons nicht zurecht kommt.
Das wäre mir neu, kannst du das bitte präzisieren?
Schau Dir mal diese Seite an: http://www.1ngo.de/web/quelltext.html.
Hier hatte ich ursprünglich vor, auf den Submit-Button zu verzichten und stattdessen die Radios mit onchange zu bestücken und bin am IE gescheitert. Ich habe die Eventhandler jetzt mal zur Demonstration onload wieder eingefügt. Der IE feuert zum einen immer erst einen Klick verspätet und liefert dann als value auch noch den Wert des letzten Klicks zurück.
Konkret: Klicke bei "Validität" auf "Weitgehend" -> keine Änderung im Ergebnisfeld.
Klicke dann auf "Nein" -> Ergebnis 2+, daß aber für "Weitgehend" zutrifft.
Klicke auf "Berechnen", dann wird auch korrekt 2- angezeigt.
Dieses merkwürdige Verhalten bekomme ich übrigens auch, wenn ich die Eventhandler im HTML-Code direkt eintrage, den Submit-Button entferne und mir in der Funktion den Wert über alert() ausgeben lasse. Erster Klick: kein alert, folgende Klicks: alert des vorherigen Wertes.freundliche Grüße
Ingo-
Tag Ingo.
Schau Dir mal diese Seite an: http://www.1ngo.de/web/quelltext.html.
Ja, werde ich tun und mich dann noch mal melden.
Siechfred
--
Everybody's going to the party have a real good time,
Dancing in the desert blowing up the sunshine. -
Tag Ingo.
Ich korrigiere mich dahin gehend, dass der Eventhandler onchange laut MSDN tatsächlich nur in Texteingabefeldern und Auswahllisten korrekt funktioniert. Statt dessen dürfte der proprietäre Eventhandler onactivate das Mittel der Wahl sein. Ich habe das mal getestet:
function init() { obj = document.Testform.farbwexel; for(i=0;i<obj.length;i++) { if(window.event) { obj[i].onactivate = function() { document.getElementById('klicker').style.backgroundColor=this.value; }; } else { obj[i].onchange = function() { document.getElementById('klicker').style.backgroundColor=this.value; }; } } }Diese Funktion wird beim Laden aufgerufen, der dazu gehörende Auszug aus dem HTML-Code sähe so aus:
<body style="color:black;background-color:white;" onload="init();"> <form name="Testform"> <input type="radio" name="farbwexel" value="red"> Hintergrund Rot<br> <input type="radio" name="farbwexel" value="magenta"> Hintergrund Magenta<br> </form> <table> <tr> <td id="klicker">Blubber</td> </tr> </table> </body>Das funktioniert im IE 6 und im Mozilla 1.0.4 genauso, wie es soll. Andere Testbrowser stehen mir hier nicht zur Verfügung, aber die Ergebnisse würden mich brennend interessieren. Allerdings dürfte das Prinzip das Gleiche sein, aber evtl. sind noch ein paar Codeanpassungen nötig.
Siechfred
--
Everybody's going to the party have a real good time,
Dancing in the desert blowing up the sunshine.-
Hi,
Statt dessen dürfte der proprietäre Eventhandler onactivate das Mittel der Wahl sein. Ich habe das mal getestet:
Ich auch, aber ohne Erfolg. Auf meiner Seite hatte ich sogar mal direkt in die Inputs onactivate="Bewertung()" eingetragen und der IE hatte dies genau wie onchange verspätet umgesetzt.
Aber Du kannst es Dir gerne nochmal ansehen - diesmal mit:if(window.event) f.elements[i].onchange=Bewertung; else f.elements[i].onactivate=Bewertung;freundliche Grüße
Ingo-
Tag Ingo.
Ich auch, aber ohne Erfolg. Auf meiner Seite hatte ich sogar mal direkt in die Inputs onactivate="Bewertung()" eingetragen und der IE hatte dies genau wie onchange verspätet umgesetzt.
Seltsam. Es muss eine andere Ursache außerhalb der Eventhandler sein, da das von mir geschriebene kleine Beispiel unter Verwendung von onactivate funktioniert, was es mit onclick nicht tat.
Aber Du kannst es Dir gerne nochmal ansehen - diesmal mit:
if(window.event) f.elements[i].onchange=Bewertung;
else f.elements[i].onactivate=Bewertung;Irgendwo ist da noch ein Denkfehler, den ich gerade nicht finden kann. Ich suche weiter ... Siechfred -- Everybody's going to the party have a real good time, Dancing in the desert blowing up the sunshine.-
Hi,
if(window.event) f.elements[i].onchange=Bewertung;
else f.elements[i].onactivate=Bewertung;> > Irgendwo ist da noch ein Denkfehler, den ich gerade nicht finden kann. Ich suche weiter ... wie gesagt: ich hatte das auch mal mit demselben Ergebnis direkt getestet, also: `<input type="radio" name="valide" id="valide_Ja" checked="checked" value="1" onactivate=Bewertung()" />`{:.language-html} ... freundliche Grüße Ingo -- [[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Hommingberger Gepardenforelle](http://www.1ngo.de/hommingberger-gepardenforelle/);-)-
Tag Ingo.
wie gesagt: ich hatte das auch mal mit demselben Ergebnis direkt getestet, also:
<input type="radio" name="valide" id="valide_Ja" checked="checked" value="1" onactivate=Bewertung()" />Es liegt definitiv nicht am Eventhandler (onactivate passt da schon, während onchange nur Müll fabriziert). Irgendwo ist da ein Haken bei der Umsetzung im IE, der aus irgendwelchen Gründen innerhalb von Javascript nicht den aktuellen, sondern den vorhergehenden Wert bereitstellt. Soweit ich das einkreisen konnte, liegt es an der Vorbelegung der Radiobuttons mittels checked-Attribut. Nimmst du die raus, funktioniert es auch im IE, wie es soll (allerdings wird dann logischerweise ein vernünftiges Ergebnis erst dann angezeigt, wenn in allen Bereichen etwas ausgewählt wurde). Ich werde mal testen, was passiert, wenn man das checked-Attribut mit JS vorbelegt.
Siechfred
--
Everybody's going to the party have a real good time,
Dancing in the desert blowing up the sunshine.-
Hi,
Es liegt definitiv nicht am Eventhandler (onactivate passt da schon, während onchange nur Müll fabriziert).
Stimmt, der feuert ja zuverlässig.
Soweit ich das einkreisen konnte, liegt es an der Vorbelegung der Radiobuttons mittels checked-Attribut. Nimmst du die raus, funktioniert es auch im IE, wie es soll (allerdings wird dann logischerweise ein vernünftiges Ergebnis erst dann angezeigt, wenn in allen Bereichen etwas ausgewählt wurde). Ich werde mal testen, was passiert, wenn man das checked-Attribut mit JS vorbelegt.
Nein, das war's nicht. Ich hatte es mal ausprobiert und es hatte keine Auswirkung.
Aber dann hatte ich die Erklärung für dieses seltsame Phänomen - und daß es bei Deiner einfachen Version klappte:
Der IE feuert onactivate bereits bevor er den Wert einträgt. Dazu kommt, daß er für die Aktualisierung des Wertes auf meinem Rechner und bei meiner Seite über 1/10 Sekunde benötigt - ich vermute, daß er auch zunächst noch die Seite neu rendert.
Dadurch rechnet er mit dem zuvor gesetztem Wert und aktualisiert diesen erst, nachdem das Berechnungsergebnis ausgegeben wurde.Abhilfe war möglich über einen Timeout.
freundliche Grüße
Ingo-
Tag Ingo.
Der IE feuert onactivate bereits bevor er den Wert einträgt. Dazu kommt, daß er für die Aktualisierung des Wertes auf meinem Rechner und bei meiner Seite über 1/10 Sekunde benötigt - ich vermute, daß er auch zunächst noch die Seite neu rendert.
Dadurch rechnet er mit dem zuvor gesetztem Wert und aktualisiert diesen erst, nachdem das Berechnungsergebnis ausgegeben wurde.Meine Güte, da soll ein normaler Mensch drauf kommen.
Abhilfe war möglich über einen Timeout.
Sollte es wirklich so einfach gewesen sein? Naja, wieder eine Macke des IE mehr für die JS-Mackensammlung :-)
Siechfred
--
Everybody's going to the party have a real good time,
Dancing in the desert blowing up the sunshine.-
Hi,
Abhilfe war möglich über einen Timeout.
Sollte es wirklich so einfach gewesen sein? Naja, wieder eine Macke des IE mehr für die JS-Mackensammlung :-)
Ja, tatsächlich.
Allerdings ist das noch nichts im Vergleich zum Opera. Opera mag weder onchange noch onactivate, sondern will es nur mit onclick machen.Die benutzerfreundlichste Lösung, um Eventhandler zu setzen, sieht jetzt also so aus:
function BewertungIE() { window.setTimeout("Bewertung()",200); } ... if(!window.navigator.language) f.elements[i].onactivate=BewertungIE; else if(window.opera) f.elements[i].onclick=Bewertung; else f.elements[i].onchange=Bewertung;und lediglich Opera-User kommen mit Tastatursteuerung nicht weiter.
freundliche Grüße
Ingo-
Tag Ingo.
Allerdings ist das noch nichts im Vergleich zum Opera. Opera mag weder onchange noch onactivate, sondern will es nur mit onclick machen.
Oh, nicht mal Opera 8? Dem wurde ja einiges an MS-Spezifika spendiert, z.B. das TextRange-Objekt. Irgendwie wird es immer schlimmer und man kann sich des Eindrucks nicht erwehren, dass die Browserhersteller JavaScript totentwickeln -- ob bei Mozilla, Opera oder eben beim IE.
Siechfred
--
Everybody's going to the party have a real good time,
Dancing in the desert blowing up the sunshine.-
Hi,
Opera mag weder onchange noch onactivate, sondern will es nur mit onclick machen.
Oh, nicht mal Opera 8?
Nein, mit dem (8.0) hatte ich das getestet.
freundliche Grüße
Ingo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-