problem mit onclick

**Tommy75** · 30.10.2005, 10:27

Hier noch der bisherige Quelltext - falls das was nützt. Und : JA, es macht keinen Sinn, jeder td eine class zuzuweisen, wird noch geändert

Quelltext :

PHP-Code:


<body>

<table class='test'>

  <tr>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='yellow.jpg'"></td>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='black.jpg'"></td>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='green.jpg'"></td>

  </tr>

  <tr>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='grey.jpg'"></td>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='blue.jpg'"></td>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='green.jpg'"></td>

  </tr>

  <tr>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='blue.jpg'"></td>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='red.jpg'"></td>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='black.jpg'"></td>

  </tr>

  <tr>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='red.jpg'"></td>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='yellow.jpg'"></td>

    <td class='test'><IMG src="nix.jpg" onclick="this.src='grey.jpg'"></td>

  </tr>

</table>

</body>

**TobiaZ** · 30.10.2005, 10:27

Na, mit JS.

Schau dir ein bisschen die Grundlagen an, oder fertige Scripts.

**wahsaga** · 30.10.2005, 11:21

Re: problem mit onclick

Am Scriptanfang eine globale Variable, meinetwegen Bild1, mit false vorbelegen.

OnClick eine Funktion aufrufen, die prüft, ob Bild1 false ist.
Falls ja, weißt sie Bild1 den Namen/Nummer des Bildes auf das geklickt wurde zu.
Falls nein, macht sie den Vergleich, ob das aktuell geklickte Bild (bzw. sein Name/Nummer) gleich dem in Bild1 gespeicherten Wert ist - und setzt anschließend Bild1 wieder auf false.

**Tommy75** · 30.10.2005, 12:33

Sowas in der Richtung hatte ich mir auch schon überlegt, aber dazu müsste ich doch mit EINEM OnClick zwei Aufgaben erledigen, oder seh ich da was falsch ?

Zuerst soll bei OnClick ja das "aufgedeckte" Bild angezeigt werden (davor sind ja alle Bilder gleich, haben also auch alle den gleichen Namen).

Danach müsste dann - halt mit dem gleichen OnClick - die von dir genannte Funktion aufgerufen und der Name des aufgedeckten Bildes übermittelt werden.

Wenn ich deinen Vorschlag richtig interpretiere, würde ich ja nur den Namen des ursprünglichen Bildes an die Funktion übergeben und zudem bekäme ich das aufgedeckte Bild nicht angezeigt....korrigier mich bitte, wenn ich daneben liege.

**NilsV** · 30.10.2005, 12:54

Definier doch einfach eine Funktion, die du dann über onClick aufrufst, mit einer id des angeklickten Bildes als Parameter.
Dann könntest du mittels getElementById von der Funktion aus alle nötigen Befehle ausführen.

**wahsaga** · 30.10.2005, 14:48

Original geschrieben von Tommy75
aber dazu müsste ich doch mit EINEM OnClick zwei Aufgaben erledigen, oder seh ich da was falsch ?

Ähm - ja und?

Ob du mittels onClick zwei Funktionen nacheinander aufrufst. oder beide notwendigen Aktionen in einer Funktion notierst - das ist deinem Browser ebenso wurscht wie mir.

**Tommy75** · 05.11.2005, 19:11

Bin wieder ein wenig weiter gekommen. Jetzt hänge ich allerdings an einem kleinen Problem... hier erstmal der bisherige code.

HTML :

PHP-Code:


<form action="" method="post" name="memory">

<table class='test'>

  <tr>

    <td><IMG src="nix.jpg" name='bild3' onclick="this.src='

            <?php echo $pics[$numbers[0]];?>';

            vergleich('<?php echo $pics[$numbers[0]];?>', 0);"></td>

    <td><IMG src="nix.jpg" name='bild3' onclick="this.src='

            <?php echo $pics[$numbers[1]];?>';

            vergleich('<?php echo $pics[$numbers[1]];?>', 1);"></td>

    <td><IMG src="nix.jpg" name='bild3' onclick="this.src='

            <?php echo $pics[$numbers[2]];?>';

            vergleich('<?php echo $pics[$numbers[2]];?>', 2);"></td>

  </tr>

Javascript :

PHP-Code:


<script language="javascript">

var pic1 = false;

var nr = false;

function vergleich(bild, nr)

  {

  var pic = bild;

  var nr = nr;

  if (pic1 == false)

    {

    pic1 = pic;

    nr = nr;

    }

  else

    {

    if (pic == pic1)

      {

      alert('Prima');

      pic1 = false;

      nr = false;

      }

    else

      {

      alert('Nochmal bitte.');

      pic1 = false;

      nr = false;

      }

    }

  }

</script>

Soweit funktioniert erstmal alles, die beiden alerts habe ich nur zu Testzwecken eingebaut. Frage wäre jetzt, wie setze ich die Bilder wieder zurück in den ursprünglichen Zustand, wenn sie nicht übereinstimmen ?
Die seite neu laden würde mir ja ALLE Bilder zurücksetzen.

Ich will kein fertiges script oder so, aber es wäre schön, wenn mir jemand die grobe Vorgehensweise nennen könnte

@wahsaga : Vielen Dank für deine Tipps mit der "falschen" Variablen

**Tommy75** · 05.11.2005, 19:36

Hat sich erledigt

Stundenlang probiert - nicht. Gerade gepostet - Lösung gefunden *g*

So funktioniert es :

PHP-Code:


<script language="javascript">

var pic1 = false;

var nr1 = false;

function vergleich(bild, nr)

  {

  var pic = bild;

  var nr = nr;

  if (pic1 == false)

    {

    pic1 = pic;

    nr1 = nr;

    }

  else

    {

    if (pic == pic1)

      {

      alert('Prima');

      pic1 = false;

      nr1 = false;

      }

    else

      {

      alert('Nochmal bitte.');

      document.images[nr1].src = 'nix.jpg';

      document.images[nr].src = 'nix.jpg';

      pic1 = false;

      nr1 = false;

      }

    }

  }

</script>

**Abraxax** · 05.11.2005, 19:41

mal ne reine logikfrage .... wenn ich mir den html/js-code der seite ansehen, müsste ich doch auch erkennen, welche bilder zusammengehören?

oder?

würde mich einfach mal so interessieren.

**TobiaZ** · 05.11.2005, 19:47

dat hab ich ihm vor 1-2 Wochen auch schon mal gesagt!

**Tommy75** · 05.11.2005, 19:58

*hüstel* sorry Abraxax, aber ich versteh deine Frage gerade nicht so ganz :/

**Abraxax** · 05.11.2005, 20:02

ganz einfach ... dein vergleich der passenden bilder passiert in JS.

nun musst du ja die werte, welche verglichen werden sollen, ebenfalls in JS haben. ergo ... ich schaue in den quellcode der seite und sehe, was wo wie zusammenpasst und kann dein memory besche****

die frage ist also .... ob das wirklich so wäre?

**Tommy75** · 05.11.2005, 20:10

shit....jetzt, wo du's erwähnst

Wenn ich in den Quellcode sehe, hab ich zwar keine Infos im JS-Bereich, aber ALLE Bilder werden im HTML-Bereich angezeigt, in etwa so :

PHP-Code:


<form action="" method="post" name="memory">

<table class='test'>

  <tr>

    <td><IMG src="nix.jpg" onclick="this.src='grey.jpg';vergleich('grey.jpg', 0);"></td>

    <td><IMG src="nix.jpg" onclick="this.src='black.jpg';vergleich('black.jpg', 1);"></td>

    <td><IMG src="nix.jpg" onclick="this.src='green.jpg';vergleich('green.jpg', 2);"></td>

  </tr>

Gut, man könnte also auf diese Art und Weise besch******. Nur - wie könnte ich das umgehen ? Bin ja wiegesagt noch recht neu auf dem Gebiet und hab bisher weder Bücher noch Lehrer oder sonstiges (nur eben Foren und google). Aber vllt. kannst du mir ja eine "Umgehung" vorschlagen ?

**Abraxax** · 05.11.2005, 20:14

per JS sehe ich das wenig chancen, obwohl es sicherlich irgendwie möglich sein wird. ich weiss grad nur nicht wie. aber mit xml nachladen usw. könnte es durchaus klappen. (hab aber keine erfahrungen damit -> forensuche)

die andere variante ist rein serverseitig basiert. das hat aber den nachteil, dass du mit jedem auf- und zudecken die seite neu laden musst.

ach .... und dann gibt es noch die dritte möglichkeit .... dir ist egal, ob jemand besch****.

problem mit onclick