onclick vs. onmouseout - Seite 2

Screeze · 23.08.2010, 16:53

Wieso willst du unbedingt javascript dafür nutzen?
Mit css wäre das unter umständen einfacher:
(quick & dirty, farben frei gewählt)

Code:

.normal {
    background-color:green;
}
.normal:hover{
    background-color:blue;
}
.selected {
    background-color:red;
}

deine td's werden standartmäßig mit der klasse normal belegt, wen man drauf klickt änderst du mit js dann die klasse auf "selected" und löscht "normal" von der zelle, schon hat sich das erledigt.

Oder hab ich da was falsch verstanden?

Murdoc · 23.08.2010, 16:56

verlesen, sorry -> kann entfernt werden <-

Asipak · 23.08.2010, 16:59

Unabhängig zu den anderen Vorschlägen sei noch gesagt, dass man mit ein wenig Debugging das aktuelle Problem schnell erkennt.

Code:

alert(this.bgColor);

gibt den Farbwert in lower-case zurück. Daher schlägt der Vergleich immer fehl.

wilsonfedex · 23.08.2010, 17:08

Zitat:

Zitat von Asipak

Ja, wenn man klickt, ist der Mauszeiger ohnehin über der Zelle, womit du bereits davon ausgehen kannst, dass sie blau ist. Das musst du nicht unbedingt nochmals überprüfen.

Mein Gedanke war, dass ich damit dann abfrage, ob die Zelle noch nicht geklickt wurde (wenn sie zuvor grün war), oder ob sie geklickt wurde (weil dann ist sie ja orange), somit ich dann die markierte (orange) Zelle bei einem weiteren Klick wieder abwählen kann, diese also wieder im Grundzustand (grün) ist.

Die Abfrage, was bei einem Klick auf eine orange Zelle passiert ist nur noch nicht im Code drin.

wilsonfedex · 23.08.2010, 17:18

Zitat:

Zitat von Asipak

Unabhängig zu den anderen Vorschlägen sei noch gesagt, dass man mit ein wenig Debugging das aktuelle Problem schnell erkennt.

Code:

alert(this.bgColor);

gibt den Farbwert in lower-case zurück. Daher schlägt der Vergleich immer fehl.

DANKE!!!! darauf hätte ich echt kommen können!!! Bin davon ausgegangen, dass ich die Farbwerte groß schreiben muss und hielt es daher auch für selbstverständlich, dass ich bei einer Abfrage dies ebenfalls so schreibe.

Hier dann der Code, der funktioniert:

PHP-Code:

  echo"<td bgcolor=\"#00ff00\"

 
        onclick=\"if (this.bgColor == '#0000ff')

                       {this.bgColor = '#ff1cae';}

                     else if (this.bgColor == '#ff1cae')

                             {this.bgColor = '#00ff00';}\"        

       

        onMouseover=\"if (this.bgColor != '#ff1cae')

                               {this.bgColor = '#0000ff';}\"

        

         onMouseout=\"if (this.bgColor != '#ff1cae')

                               {this.bgColor = '#00ff00';

                                this.title = 'bitte klicken um auszuwaehlen';}\"

 
      width=\"25\" align=\"center\">$i</td>";

nikosch · 23.08.2010, 17:27

Du solltest niemals solche Daten in JS hardcodieren

- Was ist, wenn Du die Farben mal ändern willst
- Was, wenn Du weitere Eigenschaft (z.B. Link nicht unterstrichen/unterstrichen) switchen willst?

Besser ist es, CSS-Klassen zu schalten und die Formatierung zentral im CSS zu machen. Im JS kannst DU dann auch verständliche Bezeichner benutzen, z.B. active, hover, inactive.

Außerdem solltest DU keinen inline-Code verwenden, sondern die Elemente nachträglich mit JS „ausstatten“.

Screeze · 23.08.2010, 17:27

und was spricht gegen die css version?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Onclick Problem	HipHopFreak	Trash	0	23.08.2010 14:02
php array mit onclick an js übergeben?	MariL	PHP Tipps 2010	4	25.02.2010 07:25
div min onclick über Link	mistermint	HTML, Usability und Barrierefreiheit	4	14.01.2010 19:57
onClick + overlays aber ohne submit	Chili-Schaf	JavaScript, Ajax und mehr	2	04.12.2009 12:12
onclick mit 3 angaben?	taurus	JavaScript, Ajax und mehr	8	01.11.2009 22:25
[Erledigt] OnClick event abbrechen	Frank	JavaScript, Ajax und mehr	4	25.08.2009 12:15
[Erledigt] onclick, onmoseover,onmouseout in 1 href	FreddyS	HTML, Usability und Barrierefreiheit	11	31.07.2009 20:29
onclick vor seitenaufruf ausführen	KokosDesign	JavaScript, Ajax und mehr	4	27.05.2009 01:25
onclick eines buttons ändern	necrom0rb	HTML, Usability und Barrierefreiheit	6	27.04.2006 21:42
JS: Frage zu onClick in Verbindung mit einer Funktion		HTML, Usability und Barrierefreiheit	1	04.11.2005 16:06
Variable mit onClick übergeben?		PHP Tipps 2005-2	2	22.09.2005 15:33
mit onClick PHP datei ausführen lassen	Asipak	HTML, Usability und Barrierefreiheit	15	22.08.2005 20:44
mit onclick() Datei aufrufen		HTML, Usability und Barrierefreiheit	6	11.08.2005 11:22
onmousein flash einblenden, bei onmouseout ausblenden		HTML, Usability und Barrierefreiheit	11	08.06.2005 11:00
[Erledigt] javascript onclick oder doch was anderes?		HTML, Usability und Barrierefreiheit	2	04.06.2005 02:07

23.08.2010, 16:53
Screeze Erfahrener Benutzer Registriert seit: 04.01.2009 Beiträge: 844 PHP-Kenntnisse: Fortgeschritten	Wieso willst du unbedingt javascript dafür nutzen? Mit css wäre das unter umständen einfacher: (quick & dirty, farben frei gewählt) Code: .normal { background-color:green; } .normal:hover{ background-color:blue; } .selected { background-color:red; } deine td's werden standartmäßig mit der klasse normal belegt, wen man drauf klickt änderst du mit js dann die klasse auf "selected" und löscht "normal" von der zelle, schon hat sich das erledigt. Oder hab ich da was falsch verstanden? __________________ Develovision Blog


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

23.08.2010, 16:56
Murdoc Neuer Benutzer Registriert seit: 22.08.2010 Beiträge: 16 PHP-Kenntnisse: Fortgeschritten	verlesen, sorry -> kann entfernt werden <-

23.08.2010, 16:59
Asipak Moderator Registriert seit: 18.07.2005 Beiträge: 4.071	Unabhängig zu den anderen Vorschlägen sei noch gesagt, dass man mit ein wenig Debugging das aktuelle Problem schnell erkennt. Code: alert(this.bgColor); gibt den Farbwert in lower-case zurück. Daher schlägt der Vergleich immer fehl. __________________ HalloPHP

23.08.2010, 17:27
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.241 PHP-Kenntnisse: Fortgeschritten	Du solltest niemals solche Daten in JS hardcodieren - Was ist, wenn Du die Farben mal ändern willst - Was, wenn Du weitere Eigenschaft (z.B. Link nicht unterstrichen/unterstrichen) switchen willst? Besser ist es, CSS-Klassen zu schalten und die Formatierung zentral im CSS zu machen. Im JS kannst DU dann auch verständliche Bezeichner benutzen, z.B. active, hover, inactive. Außerdem solltest DU keinen inline-Code verwenden, sondern die Elemente nachträglich mit JS „ausstatten“. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

23.08.2010, 17:27
Screeze Erfahrener Benutzer Registriert seit: 04.01.2009 Beiträge: 844 PHP-Kenntnisse: Fortgeschritten	und was spricht gegen die css version? __________________ Develovision Blog