onClick -> Hintergrundfarbe wechseln?

Suchfunktion

Suchfunktion

Erfahrenes Mitglied
Hi,

ich moechte bei einem onClick-Event die Hintergrundfarbe des entsprechenden a-Tags aendern lassen.

[rot]->onClick->[gruen]->onClick->[rot]->usw.
(Also bei jedem Klick soll es auf die entsprechend andere Farbe wechseln..)

Problem:
Wenn ich die Seite aufrufe und auf den roten a-Tag klicke, faerbt er sich gruen.
Klicke ich allerdings nochmal drauf, passiert nichts. (-> Hier sollte sich die Farbe wieder zu rot [ursprungsfarbe] aendern.)

Hier mein Script:
HTML: 
<html>
<head>
  <script type="text/javascript">
    function activateItem(data){
      data.style.backgroundColor= data.style.backgroundColor='#900'?'#090':'#900';
    }
  </script>
</head>
<body>
  <a href="javascript:;" style="color:#fff; background-color:#900; padding:2px;" onclick="activateItem(this);">inaktiv</a></span>
</body>
</html>

Findet jemand den Fehler
(Habe es schon im Firefox, Netscape, IE, etc. ausprobiert.. ohne Erfolg.. :-( )
 
Moin!

Ich würde sagen, du hast DEN standart Schusselfehler gemacht: Die Bedingung des Ausdrucks ist eine Zuweisung...
Code: 
data.style.backgroundColor= data.style.backgroundColor='#900'?'#090':'#900';
ändern in
Code: 
data.style.backgroundColor= (data.style.backgroundColor=='#900')?'#090':'#900';

Gruß
Enum
 
hat auch irgendjemand ein Code dazu wie man das ganze in einem drop down feld machen kann? sprich sobald man auf ein wort im drop down feld klickt, dass sich dann das Hintergrundbild ändert?

Ist ein bisschen abgeleitet vom eigentlichen Fall wollte aber keinen neuen Thread aufmachen. Hoffe das ist ok ;)
 
Hi!

Genau das gleiche Prinzip:
Code: 
<script type="text/javascript"><!--

function change()
{
	if(window.style)
	{
 		return window.style.backgroundImage = "url(bild.jpg)";
	}

	if(document.documentElement && document.documentElement.style)
	{
		return document.documentElement.style.backgroundImage = "url(bild.jpg)";
	}

	if(document.body && document.body.style)
	{
		return document.body.style.backgroundImage = "url(bild.jpg)";
	}  
}

--></script>

<select onclick="change();">
 <option> Alpa
 <option> Beta
 <option> Gamma
 <option> Delta
</select>

Ach ja, die Funktion "change();" ist so groß ausgefallen um sicherzugehen, dass es in möglichst vielen Browsern funktioniert. Einfacher wäre es, du weist dem <body>-Tag ein ID-Attribut zu (z.B. "body"), dann könnte das wie folgt aussehen:
Code: 
function change()
{
	if(document.getElementById("body")
	{
		return document.getElementById("body").style.backgroundImage = "url(bild.jpg)";
	}  
}

Das onClick-Attribut des <select>-Feldes könntest du auch durch onChange oder onMouseDown ersetzen. Oder du versuchst, das Attribut nicht für das Feld, sondern für die <option>-Tags zu setzen. Was allerdings nicht in jedem Browser funktionieren wird...

Gruß
Enum
 
PS:

Natürlich musst Du das ganze nicht unbedingt auf das <body> Tag anwenden. Wenn Du mit IDs arbeitest, kannst Du so jedem Blockelement ein dynamisches Hintergrundbild verpassen...
 
es gibt ein weiteres Problem in diversen Browsern(bspw. Geckos):
Diese Verwalten Farbwerte intern im Format rgb(r,g,b), weswegen dein Vergleich dort nie funktionieren wird.

Kannst ja mal probieren :)
Code: 
<b style="background-color:#900" onclick="alert(this.style.backgroundColor)">fiese Falle</s>


Workaround: arbeite mit Klassen, zum Vergleich ziehe dann halt die Klassennamen heran.
 
Hallo, habe gerade versucht den Code mal ein bisschen zu bearbeiten. Aber effektiv hat es garnicht geklappt. ICh versteh das ganze nicht das soll ja hinterher so laufen dass wenn man auf einen z.B Designnamen im DropDown Feld klickt, dass sich dann das Hintergrundbild/Design ändert. Aber das klappt garnicht Oo
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück