Bei onclick soll sich die Zeilenfarbe geändert bleiben.
Hallo
Ich habe folgendes Problem.
Wenn ich mit der Maus eine Zeile auswähle dann sollte sich die
Hintergrundfarbe von der Zeile ändern.
Das tut die auch, aber wenn ich dann wieder weg fahre dann kommt die alte Farbe wieder.
Ich habe das mit einem JavaScript gemacht.
<script type="text/javascript">
<!--
function setStyle(obj,e)
{
if(e)
{
if(obj.id=='clicked')
{
obj.id='unclicked';
resetStyle(obj,true);
return;
}
obj.id='clicked';
}
obj.style.backgroundColor = '#1A3A4D';
obj.style.color = '#102B3B';
}
function resetStyle(obj,e)
{
if(obj.id=='clicked')
{
return;
}
obj.style.backgroundColor = '#102B3B';
obj.style.color = '#102B3B';
}
//-->
</script>
onMouseover=this.style.backgroundColor=\'#CECBCE\' onMouseout=this.style.backgroundColor="" onclick="setStyle(this,true)"
Wo könnte der Fehler sein?
Es sollte immer nur eine Zeile markiert sein.
Danke.
Ich habe folgendes Problem.
Wenn ich mit der Maus eine Zeile auswähle dann sollte sich die
Hintergrundfarbe von der Zeile ändern.
Das tut die auch, aber wenn ich dann wieder weg fahre dann kommt die alte Farbe wieder.
Ich habe das mit einem JavaScript gemacht.
<script type="text/javascript">
<!--
function setStyle(obj,e)
{
if(e)
{
if(obj.id=='clicked')
{
obj.id='unclicked';
resetStyle(obj,true);
return;
}
obj.id='clicked';
}
obj.style.backgroundColor = '#1A3A4D';
obj.style.color = '#102B3B';
}
function resetStyle(obj,e)
{
if(obj.id=='clicked')
{
return;
}
obj.style.backgroundColor = '#102B3B';
obj.style.color = '#102B3B';
}
//-->
</script>
onMouseover=this.style.backgroundColor=\'#CECBCE\' onMouseout=this.style.backgroundColor="" onclick="setStyle(this,true)"
Wo könnte der Fehler sein?
Es sollte immer nur eine Zeile markiert sein.
Danke.
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 202756
Url: https://administrator.de/forum/bei-onclick-soll-sich-die-zeilenfarbe-geaendert-bleiben-202756.html
Ausgedruckt am: 10.04.2025 um 14:04 Uhr
22 Kommentare
Neuester Kommentar
Hallo Helmut,
1.
Du verwendest das onclick und onmouseout zusammen !
Nach deinem Klick auf das Element bewegst du die Maus und __verlässt__ das Element wodurch der onmouseout aktiviert und die Hintergrundfarbe wieder geändert wird !
Das bedeute schon mal, das dein onmouseout zwischen normale Elementen und dem einem aktiven/angeklicktem Elemente unterscheiden muss !
2.
Da du dir so ganz nebenbei noch gewünscht hast, das nur ein Elemente aktive/angeklickt ist, musst du dir mit dem onclick merken welches Elemente gerade aktiviert wurde. Z.B. mit einer Variable in der die ID des aktiven Elementes hinterlegt wird. Dieses Variabel kannst du dann auch in deinem onmouseout verwenden um das normale Elemente von einem aktiven zu unterscheiden.
Bei einem Klick muss dann geprüft werden ob das Elemente dem aus der Variabel entspricht...
Wenn dem so ist, muss nichts geschehen (ist ja schon aktiv)
Wenn nicht, muss das Element aus der Variable wieder "normalisiert" werden und das angeklickte "markiert" und gemerkt werden.
~Arano
1.
Du verwendest das onclick und onmouseout zusammen !
Nach deinem Klick auf das Element bewegst du die Maus und __verlässt__ das Element wodurch der onmouseout aktiviert und die Hintergrundfarbe wieder geändert wird !
Das bedeute schon mal, das dein onmouseout zwischen normale Elementen und dem einem aktiven/angeklicktem Elemente unterscheiden muss !
2.
Da du dir so ganz nebenbei noch gewünscht hast, das nur ein Elemente aktive/angeklickt ist, musst du dir mit dem onclick merken welches Elemente gerade aktiviert wurde. Z.B. mit einer Variable in der die ID des aktiven Elementes hinterlegt wird. Dieses Variabel kannst du dann auch in deinem onmouseout verwenden um das normale Elemente von einem aktiven zu unterscheiden.
Bei einem Klick muss dann geprüft werden ob das Elemente dem aus der Variabel entspricht...
Wenn dem so ist, muss nichts geschehen (ist ja schon aktiv)
Wenn nicht, muss das Element aus der Variable wieder "normalisiert" werden und das angeklickte "markiert" und gemerkt werden.
~Arano
Guten Morgen
Ja klar !
Also jedes deiner Elemente das mit diesem Effekt versehen werden soll, bekommt eine ID. Ich veranschauliche das mal an einer kleinen Tabelle:
Somit ist jede __Zeile__ eindeutig identifizierbar
In der Javascript-Funktion liest du dann dieses ID aus und vergleichst den Wert mit deiner "Merk-Variable" curMerked. Wenn die Werte gleich sind, bedeutete das, dass die Zeile schon als "angeklickt" markiert ist und wir verlassen die Funktion ohne etwas zu machen.
Wenn die Werte aber unterschiedlich sind. muss du die Hintergrundfarbe von dem Element mit der ID aus der Mark-Variable wieder zurücksetzen, die Hintergrundfarbe des (neu) angeklickten Element ändern und die neue ID in die Mark-Variable schreiben.
Bei Funktionen erwarten als Parameter das aktuelle Element.
Sie müssen als in folgender Form implementiert werden:
Sämtlicher Code ist __nicht getestet__
Sämtlicher Code ist __nicht getestet__
Viel Erfolg
~Arano
Ja klar !
Also jedes deiner Elemente das mit diesem Effekt versehen werden soll, bekommt eine ID. Ich veranschauliche das mal an einer kleinen Tabelle:
<table>
<tr id="z1" onclick="..."> <td>Zeile 1, Spalte 1</td> <td>Zeile 1, Spalte 2</td> <tr>
<tr id="z2" onclick="..."> <td>Zeile 2, Spalte 1</td> <td>Zeile 2, Spalte 2</td> <tr>
<tr id="z3" onclick="..."> <td>Zeile 3, Spalte 1</td> <td>Zeile 3, Spalte 2</td> <tr>
</table>
In der Javascript-Funktion liest du dann dieses ID aus und vergleichst den Wert mit deiner "Merk-Variable" curMerked. Wenn die Werte gleich sind, bedeutete das, dass die Zeile schon als "angeklickt" markiert ist und wir verlassen die Funktion ohne etwas zu machen.
Wenn die Werte aber unterschiedlich sind. muss du die Hintergrundfarbe von dem Element mit der ID aus der Mark-Variable wieder zurücksetzen, die Hintergrundfarbe des (neu) angeklickten Element ändern und die neue ID in die Mark-Variable schreiben.
/**
* globale Variabel, sie steht in allen NACHVOLGENDEN Funktionen zur Verfügung.
* In ihr speichern / merken wir und die ID des aktuell markierten Elements.
*/
var curMarked=null;
/**
* mark_as_single_clicked( elm )
*
* Markiert ein ein einziges Element als "markiert" in dem es die Hintergrundfarbe ändert.
* Um nur jeweils ein Element als markiert zu halten, wird die ID des Elements gespeichert.
* Anhand der gespeicherten ID wird bei einem Aufruf das alte Element resettet und das neue
* modifiziert.
*/
function mark_as_single_clicked( element )
{
if( element.id==curMarked )
{
// angeklickte Elemente sind gleich
// es gibt nichts zu tun
return null;
}
// Elemente sind unterschiedlich
// resete altes Element
if( curMarked!=null )
{
// beim ersten Aufruf der Funktion, kann es ja kein markiertes Element geben,
// also enthält die Mark-Variable keine gültige ID !!!
// darum nur resetten, wenn die Merk-Variable NICHT GLEICH NULL ist !!!
lastMarked = document.getElementById( curMarked );
lastMarked.style.backgroundColor = "#ffffff";
lastMarked.style.color = "#000000";
}
// modifiziere neues Element
element.style.backgroundColor = "#cccccc";
element.style.color = "#99000";
// merke Element
curMarked = element.id;
return true;
}
/**
* toggle_highlight( elm )
*
* Anhand der globalen Mark-Variable entscheiden wir welche Hintergrundfarbe
* das Element beim verlassen mit dem Mauszeiger bekommt (onmouseout)
*/
function toggle_highlight( element )
{
// Jetzt bist du dran !
// verwende die Merk-Variable um zwischen einem "normalen" und einem
// "markiertem" Element zu unterscheiden.
return true
}
Sie müssen als in folgender Form implementiert werden:
<table>
<tr id="z1" onclick="mark_as_single_clicked(this)" onmousout="toggle_hightlight(this)">
<td>Zeile 1, Spalte 1</td> <td>Zeile 1, Spalte 2</td>
<tr>
<tr id="z2" onclick="mark_as_single_clicked(this)" onmousout="toggle_hightlight(this)">
<td>Zeile 2, Spalte 1</td> <td>Zeile 2, Spalte 2</td>
<tr>
<tr id="z3" onclick="mark_as_single_clicked(this)" onmousout="toggle_hightlight(this)">
<td>Zeile 3, Spalte 1</td> <td>Zeile 3, Spalte 2</td>
<tr>
</table>
Sämtlicher Code ist __nicht getestet__
Sämtlicher Code ist __nicht getestet__
Viel Erfolg
~Arano
Hi,
na jetzt möchtest du aber ein bisschen viel
Ähm,ich glaube zwar, dass das mit der Enter- und den Pfeiltaten prinzipiell möglich ist aber das überschreitet A) meine Wissen und B) schätze ich mal dass das auch einiges an Aufwand bedeutet und hier im Forum eher schlecht zu bewältigen ist, vor allem bei eingeschränkter Erfahrung.
Darum lasse ich das einfach weg !
Machen wir also folgendes:
bei Doppelklick, öffnen der Details und
bei einfachen Klick, Zeile markieren.
Als erstes machst du aus dem onclick ein ondblclick um bei einem Doppelklick die Details aufzurufen.
Und nun fügst du ein neues onclick ein. Wenn du meinen Funktionsnamen übernimmst, etwa wie folgt:
~Arano
na jetzt möchtest du aber ein bisschen viel
Ähm,ich glaube zwar, dass das mit der Enter- und den Pfeiltaten prinzipiell möglich ist aber das überschreitet A) meine Wissen und B) schätze ich mal dass das auch einiges an Aufwand bedeutet und hier im Forum eher schlecht zu bewältigen ist, vor allem bei eingeschränkter Erfahrung.
Darum lasse ich das einfach weg !
Machen wir also folgendes:
bei Doppelklick, öffnen der Details und
bei einfachen Klick, Zeile markieren.
Als erstes machst du aus dem onclick ein ondblclick um bei einem Doppelklick die Details aufzurufen.
Und nun fügst du ein neues onclick ein. Wenn du meinen Funktionsnamen übernimmst, etwa wie folgt:
onclick="mark_as_single_clicked(this)"
~Arano
Hi hi !
ABER Schau noch mal was ich unter dem Javascript gepostet habe.
Schiebe einfach noch mal ein alert("DEBUG-Nachricht"); in die erste Zeile der Funktion die vermutlich nicht funktioniert. So kann man sich Gewissheit verschaffen ob die Funktion überhaupt aufgerufen wird und wenn ja, wie weit sie "abgearbeitet" wird... wenn man mehrere alersts einbaut
1. Meinst du dann hätte ich das nicht "irgendwie anders" vorgeschlagen ?
2. Definiere "irgendwie" !
3. Steht in deinem onclick="GoTo() irgend ein "document" und
4. da du es scheinbar nicht weisst: Was ist den "document" ?
~Arano
Das hab ich so versucht, aber das geht nicht.
Das ist keine verständliche Fehlermeldung / Aussage - damit kann ich nichts anfangen !Reicht das denn aus wenn ich den code von dir in eine Datei speichere und am Anfang die Zeile:
<script src="../javascript/zeilenfarbe.js" type="text/javascript"></script> einfüge.
Sofern der Pfad richtig ist, eigentlich ja !<script src="../javascript/zeilenfarbe.js" type="text/javascript"></script> einfüge.
ABER Schau noch mal was ich unter dem Javascript gepostet habe.
Schiebe einfach noch mal ein alert("DEBUG-Nachricht"); in die erste Zeile der Funktion die vermutlich nicht funktioniert. So kann man sich Gewissheit verschaffen ob die Funktion überhaupt aufgerufen wird und wenn ja, wie weit sie "abgearbeitet" wird... wenn man mehrere alersts einbaut
Muß der onclick Befehl dann nicht irgendwie anders heisen? onclick="document...
Nicht dein Ernst oder !?1. Meinst du dann hätte ich das nicht "irgendwie anders" vorgeschlagen ?
2. Definiere "irgendwie" !
3. Steht in deinem onclick="GoTo() irgend ein "document" und
4. da du es scheinbar nicht weisst: Was ist den "document" ?
~Arano
Hallo Helmut
ich kann dir leider nicht folgen !?
Ich habe mir das jetzt gerade mal selber in eine Datei zusammen kopiert. Also ein simples HTML-Grundgerüst, mein JS in den Header und eine Tabelle wie die die ich zum zeigen verwendet habe in den Body.
Funktioniert !
Einzig den SChriftfarbenwechsel sieht man nicht, aber das hat andere Gründe - aber das Script funktioniert !
Du musst also schon mal etwas genauer fragen oder sagen was los ist...
~Arano
ich kann dir leider nicht folgen !?
Ich habe mir das jetzt gerade mal selber in eine Datei zusammen kopiert. Also ein simples HTML-Grundgerüst, mein JS in den Header und eine Tabelle wie die die ich zum zeigen verwendet habe in den Body.
Funktioniert !
Einzig den SChriftfarbenwechsel sieht man nicht, aber das hat andere Gründe - aber das Script funktioniert !
Du musst also schon mal etwas genauer fragen oder sagen was los ist...
~Arano
Guten Tag,
Dafür habe ich ja bereits die zweite JS-Funktion vorgesehen: toggle_highlight()
Was haben wir denn ?
Dein ursprünglicher Hover-Effekt hatte lediglich zwei Zustände:
Durch die Modifikation mit der onclick-Funktion kommen noch zwei Zustände dazu:
Du musst also als erstes einmal herausfinden, ob das Element ein "markiertes" oder ein "normales" Element ist. Das kannst du anhand der IDs machen ! Jedes Element hat seine eignen ID und zusätzlich hast du die ID des markierten Elements in der Variable curMarked stehen. So kannst du also entscheiden ob das Element das aktuell Markierte ist, oder nicht.
Je nach dem was es dann ist, liest du die Hintergrundfarbe aus und entscheidest erneut was passieren soll.
Mach wir das mal so:
Aufgabe 1
Schreibe eine Javascipt-Funktion toggle_highlight(this) die dir mittels alert(...) mitteilt ob das Element (this) ein "normales" oder ein "markiertes" ist.
Verwende dazu als Referenz die Variable "curMarked".
Zum testen bindest du die JS-Funktion __nur__ als "onmouseover" in deinen Tabellenzeilen ein.
Viel Erfolg
~Arano
Wenn ich das also mit dem aufruf mache dann gehts nicht weil ja die onMousout das wieder aus macht.
Ja genau, so ist es !Dafür habe ich ja bereits die zweite JS-Funktion vorgesehen: toggle_highlight()
Was haben wir denn ?
Dein ursprünglicher Hover-Effekt hatte lediglich zwei Zustände:
- Normale Hintergrundfarbe und
- Hervorgehobene Hintergrundfarbe
Durch die Modifikation mit der onclick-Funktion kommen noch zwei Zustände dazu:
- normale Hintergrundfarbe,
- hervorgehobene Hintergrundfarbe,
- markierte Hintergrundfarbe und
- markierte hervorgehobene Hintergrundfarbe.
Du musst also als erstes einmal herausfinden, ob das Element ein "markiertes" oder ein "normales" Element ist. Das kannst du anhand der IDs machen ! Jedes Element hat seine eignen ID und zusätzlich hast du die ID des markierten Elements in der Variable curMarked stehen. So kannst du also entscheiden ob das Element das aktuell Markierte ist, oder nicht.
Je nach dem was es dann ist, liest du die Hintergrundfarbe aus und entscheidest erneut was passieren soll.
Mach wir das mal so:
Aufgabe 1
Schreibe eine Javascipt-Funktion toggle_highlight(this) die dir mittels alert(...) mitteilt ob das Element (this) ein "normales" oder ein "markiertes" ist.
Verwende dazu als Referenz die Variable "curMarked".
Zum testen bindest du die JS-Funktion __nur__ als "onmouseover" in deinen Tabellenzeilen ein.
Viel Erfolg
~Arano
Hi...
hm... jetzt weiß ich nicht mehr wie ich dir Helfen kann !?
Alle was du innerhalb der vorgeschlagenen Funktion logisch zusammensetzen musst ist:
http://wiki.selfhtml.org/wiki/Referenz:JavaScript
~Arano
hm... jetzt weiß ich nicht mehr wie ich dir Helfen kann !?
Alle was du innerhalb der vorgeschlagenen Funktion logisch zusammensetzen musst ist:
- if(){} else{}
- alert("markiert")
- alert("normal")
- element.id
- curMarked
http://wiki.selfhtml.org/wiki/Referenz:JavaScript
~Arano
Hallo Helmut.
Ich habe die komplette Lösung doch bereits im Kopf !
Ich müsst sie nur noch niederschreiben... aber das will ich nicht - das ist deine Aufgabe !
Und bevor du mir mit noch mehr ergoogletem kommst:
~Arano
Jetzt hab ich das ganze Wochenende gegooglt und bin zu nichts nützliches gekommen.
Warum ?Ich habe die komplette Lösung doch bereits im Kopf !
Ich müsst sie nur noch niederschreiben... aber das will ich nicht - das ist deine Aufgabe !
Und bevor du mir mit noch mehr ergoogletem kommst:
- Was verstehst du an meiner ID Lösung nicht und
- Was ist mit der Aufgabe 1 !?
~Arano
Ey ! Das ist doch jetzt nicht dein Ernst oder !?
Seit wann sind die Zeilen den Zweifarbig !?
Das jede zweite Zeile eine andere Farbe hat ist mir jetzt neu und das funktioniert mit meinem Script nicht !
Denn das bedeutet, dass wir uns nicht nur merken müssen welche Zeile markiert ist, sondern auch welche Farbe diese Zeile hatte. Das ist sowohl für die Markier-Funktion wichtig um das Element in den Ursprungszustand zurück zu setzen... als auch für den Hover-Effekt der beim Verlassen des Elements ebenfalls den Ursprungszustand wissen muss !
Auf der anderen Seite mag es erfreulich sein das du es verstehen möchtest.
ABER __meine__ Zeit ist kostbar !
Soll heißen: Solange ich VON DIR keine vernünftigen Antworten auf die Fragen aus Aufgabe 1 erhalte... rühre ich keinen Fingen ! Ich habe sowohl genügend eigene Arbeit als auch Bedürfnis nach Ruhe, als das ich Zeit hätte meine Zeit mit dem Wiederholen von Fragen zu verschwenden.
Erfolgreiches Wochenende
~Arano
Seit wann sind die Zeilen den Zweifarbig !?
Das jede zweite Zeile eine andere Farbe hat ist mir jetzt neu und das funktioniert mit meinem Script nicht !
Denn das bedeutet, dass wir uns nicht nur merken müssen welche Zeile markiert ist, sondern auch welche Farbe diese Zeile hatte. Das ist sowohl für die Markier-Funktion wichtig um das Element in den Ursprungszustand zurück zu setzen... als auch für den Hover-Effekt der beim Verlassen des Elements ebenfalls den Ursprungszustand wissen muss !
Auf der anderen Seite mag es erfreulich sein das du es verstehen möchtest.
ABER __meine__ Zeit ist kostbar !
Soll heißen: Solange ich VON DIR keine vernünftigen Antworten auf die Fragen aus Aufgabe 1 erhalte... rühre ich keinen Fingen ! Ich habe sowohl genügend eigene Arbeit als auch Bedürfnis nach Ruhe, als das ich Zeit hätte meine Zeit mit dem Wiederholen von Fragen zu verschwenden.
Erfolgreiches Wochenende
~Arano