✔ onClick

A

Aminui

Grünschnabel
Hallo zusammen
Seid 2 Tagen suche ich nun nach einer Lösung.
Ich habe ein Rätsel erstellt und bei dem soll man die Buchstaben anklicken können das die dann die Farbe ändern und auch wieder "ausmachen" können, also wieder zur alten Farbe zurück. haben.
Mit
HTML: 
** 
<script type="text/javascript">
    function activateItem(data){
      data.style.backgroundColor= (data.style.backgroundColor=='#000')?'#900':'#000';
    }
  </script>
</head>

<font size="+2">
<table border="0" style="float:left; margin-right:50px; margin-bottom:10px">



 <tr>

<td>        <a href="javascript:;" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);">        A        </td>        </a>
<td>        <a href="javascript:;" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);">        T        </td>        </a>
<td>        <a href="javascript:;" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);">        N        </td>        </a>
funktioniert es im IE ganz gut nur im Firefox gar nicht.


Mit
HTML: 
 **
<script type="text/javascript">
    function activateItem(data){
      data.style.backgroundColor= (data.style.backgroundColor="darkred");

   }

  </script>
</head>

<font size="+2">
<table border="0" style="float:left; margin-right:50px; margin-bottom:10px">



<tr>

<td>        <a href="javascript:;"  onclick="activateItem(this);">         A        </td>        </a>
<td>        <a href="javascript:;"  onclick="activateItem(this);">         T        </td>        </a>
Geht es in beiden Browser aber nur "an" mit dem 2 klick wechselt die Farbe nicht zurück.

Da ich kein Profi bin und nur für mich privat ein bisschen mit HTML rumbastel bin ich am Ende meine Weisheit. Ich finde auch nicht spassendes im Netz.

Wäre super wenn jemand einen Tipp für mich hätte.
 
Zuletzt bearbeitet:
Das Zweite kann natürlich nicht zurückswitchen, wie auch, es wird ja lediglich gesagt, dass es bei Click darkred werden soll, aber nicht, was bei einem wiederholten Click passieren soll.

Abgesehen davon hast Du die Tags falsch gesetzt.
Code: 
<td><a>hier</a></td>
ist richtig, Du hast aber
Code: 
<td><a>hier</td></a>
(verkreuzte tags bzw falsche Verschachtelung)

Wegen des Click-Events geh ich mal auf die Suche (oder Jemand kann schneller helfen :))

mfg chmee
 
ok danke schon mal, das mit den tags habe ich geändert.
War so auf meiN problem fixiert das ich das übersehen habe.
Ich hab schon eniges abgesucht und auch ausprobiert wie ich nen 2. Befehl, fürs zurückswitchen, reinbekomme das das funktioniert .. aber bisher Fehlanzeige.
 
Das Problem ist, dass alle aktuellen Browser (Chrome, FF, IE, Opera) backgroundColor als rgb(x, x, x) zurückliefern.

Folgendes funktioniert bei mir wunderbar:
Javascript: 
data.style.backgroundColor= (data.style.backgroundColor=='rgb(0, 0, 0)')?'#900':'#000';

Einige Browser unterstützen das aber nicht, deshalb hier ein Workaround, der bei allen funktioniert:
Javascript: 
var initial = '';
window.onload = function()
{
  initial = document.getElementById('initial_a').style.backgroundColor;
}
function activateItem(data)
{
  data.style.backgroundColor= (data.style.backgroundColor==initial)?'#900':'#000';
}
Dazu musst du einem beliebigen Link noch eine ID verpassen:
HTML: 
<a href="#" id="initial_a" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);">

Dadurch wird immer mit dem backgroundColor-Format, das der Browser verwendet, geprüft.
 
Puh ich habe es ausprobiert, das merkwürdige ist es funktioniert genau 1x.
anklicken rot, nochmal anklicken schwarz .. das wars, beim erneuten anklicken tut sich nix mehr.
 
Zur Ansicht hier mal der link zu meinem Rätsel, düfte dann wohl leichter zu verstehen sein
http://www.staubkind-fanpage.de/index/raetsel.html
Ideal wäre es wenn man die Buchstaben - oder den Hintergrund- "an" und "aus" machen kann so oft man will. Manchmal meint man ja man hat die Lösung ist es aber nicht. ;)
Schonmal danke an alle die bisher versucht haben mir zu helfen :)
 
Hier mal was exotischeres

Javascript: 
function activateItem(data){
	if('isActive' in data) {
		delete data.isActive;
		data.style.backgroundColor = '#000';
	} else {
		data.isActive = true;
		data.style.backgroundColor = '#900';
	}
}
 
*haare rauf*
ich habe jetzt
HTML: 
  <script type="text/javascript">
      function activateItem(data){
      data.style.backgroundColor= (data.style.backgroundColor=='#000')?'#800':'#000';
    }
  </script>

</head>

<font size="+2">
<table border="0" style="float:left; margin-right:50px; margin-bottom:10px">


 <tr>
<tr align="center" valign="middle">

<td>        <a href="javascript:;" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);">         A        </a>        </td>
<td>        <a href="javascript:;" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);">         T        </a>        </td>
<td>        <a href="javascript:;" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);">         N        </a>        </td>
<td>        <a href="javascript:;" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);">         N        </a>
Im IE funtioniert das astrein .. nur in den anderen Browser tut sich rein gar nix ..

Ich glaube ich gebe es für heute auf ... :(
Morgen wieder mit klarem Kopf ran

(Nachtrag vom Mod : benutze bitte Tags, um Code sauberer darzustellen!)
 
Zuletzt bearbeitet von einem Moderator:
Aminui hat gesagt.:
*haare rauf*
ich habe jetzt

<script type="text/javascript">
function activateItem(data){
data.style.backgroundColor= (data.style.backgroundColor=='#000')?'#800':'#000';
}
</script>

</head>

<font size="+2">
<table border="0" style="float:left; margin-right:50px; margin-bottom:10px">


<tr>
<tr align="center" valign="middle">

<td> <a href="javascript:;" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);"> A </a> </td>
<td> <a href="javascript:;" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);"> T </a> </td>
<td> <a href="javascript:;" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);"> N </a> </td>
<td> <a href="javascript:;" style="color:#fff; background-color:#000; padding:2px;" onclick="activateItem(this);"> N </a>

Im IE funtioniert das astrein .. nur in den anderen Browser tut sich rein gar nix ..

Ich glaube ich gebe es für heute auf ... :(
Morgen wieder mit klarem Kopf ran
Zum Vergrößern anklicken....

Den untauglichen JS-Code hast du doch, abgesehen von den Hex-Farbcodes, schon eingangs gezeigt?!

Dafür wurden dir hier mehrere Lösungsansätze unterbreitet, die dich wohl nicht sonderlich interessieren :suspekt:

Es tut hier zwar zur Lösung des Problems nix zur Sache, aber

HTML: 
<a href="javascript:;" onclick="activateItem(this);" ...>

gehört grundsätzlich in

HTML: 
<a href="#" onclick="activateItem(this);" ...>

oder in

HTML: 
<a href="javascript:activateItem(this);" ...>

umgewandelt.
 
Zuletzt bearbeitet:
Ja ich habe das alte wieder hochgeladen, ich sage ja bekomme heut nix mehr auf die reihe und gucke morgen nach.
Hatte mir alles angeguckt und ausprobiert aber irgendwie hat nix geklappt.. ne sry
nicht böse sein bin von dem Programm genervt :)
Nochmal danke an alle.. morgen wird wieder gebastelt mir dröhnt der Schädel
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück