Neue Antwort schreiben 
 
Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
[Javascript] onClick funktioniert nur einmal / Code aufräumen
PacMani
Unregistered

 
Beitrag #1
[Javascript] onClick funktioniert nur einmal / Code aufräumen
Hallihallo,

ich bin ja noch ein blutiger Anfänger in Sachen Javascript (ich kenn's jetzt seit 3 Tagen) und habe ein paar nette Effekte mit Hilfe eines Fading-Skriptes (ausm Netz) erzeugt (s. Google Pac-Man Doodle Mods).
Damit habe ich noch zwei Probleme:
Wenn man ein Spiel-Thumbnail in der Tabelle anklickt, soll die Tabelle im Hintergrund einmal weiß aufpulsieren. Das tut sie auch, aber nicht, wenn man erneut auf die Tabelle klickt, sondern nur beim ersten Klick. Liegt das am fader-Skript oder an meinem Code (s. unten)?

Zweites Problem: Kann man diesen Code vereinfachen? Die onmouseover und onmouseout Ereignisse sehen doch recht spammig aus. Ist es möglich, die für alle td's festzulegen (ich denke da an so etwas wie bei CSS)?

Hier der besagte Spaghetti-Code, fader.cs findet man hier: http://www.leigeber.com/2008/05/javascri...ng-script/.
Code:
<head>
    <link rel="STYLESHEET" href="style.css" type="text/css">
    <script type="text/javascript" src="fader.js"></script>
</head>
<table id="games" onclick="colorFade('games','background','FFFFFF','333333',25,50)">
    <tr>
        <td id="pacgoogle" onmouseover="colorFade('pacgoogle','background','333333','888888')" onmouseout="colorFade('pacgoogle','background','888888','333333',25,50)"><a href="pacgoogle/index.html" target="game"><img src="pacgoogle/thumb.png"/></a></td>
        <td id="pacplus" onmouseover="colorFade('pacplus','background','333333','888888')" onmouseout="colorFade('pacplus','background','888888','333333',25,50)"><a href="pacplus/index.html" target="game"><img src="pacplus/thumb.png"/></a></td>
        <td id="pachell" onmouseover="colorFade('pachell','background','333333','888888')" onmouseout="colorFade('pachell','background','888888','333333',25,50)"><a href="pachell/index.html" target="game"><img src="pachell/thumb.png"/></a></td>
    </tr>
    <tr>
        <td id="pacman" onmouseover="colorFade('pacman','background','333333','888888')" onmouseout="colorFade('pacman','background','888888','333333',25,50)"><a href="pacman/index.html" target="game"><img src="pacman/thumb.png"/></a></td>
        <td id="pacmario" onmouseover="colorFade('pacmario','background','333333','888888')" onmouseout="colorFade('pacmario','background','888888','333333',25,50)"><a href="pacmario/index.html" target="game"><img src="pacmario/thumb.png"/></a></td>
        <td></td>
    </tr>
</table>
26.05.2010 17:59
Diese Nachricht in einer Antwort zitieren
niwax Offline
Hardcore-Coder

Beiträge: 3.829
Registriert seit: Dec 2009
Beitrag #2
[Javascript] onClick funktioniert nur einmal / Code aufräumen
Guter Tipp: nimm das script.acolo.us-Skript und Prototype Lite. Das ist zusammen zwar recht groß (zwischen 15 und 300kb, je nach Umfang), aber kann so ziemlich alles.


28.05.2010 21:32
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Dirk Offline
Software Archäologe

Beiträge: 14.721
Registriert seit: Jul 2008
Beitrag #3
[Javascript] onClick funktioniert nur einmal / Code aufräumen
ohne reinzuschauen: evtl. ist nen fehler im ereignis, worauf der ganze code dann als falsch gesehen wird. ich teste sowas immer im ffx, unter extras gibts ne fehlerkonsole. primitiv, aber effektiv.

29.05.2010 08:58
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
PacMani
Unregistered

 
Beitrag #4
[Javascript] onClick funktioniert nur einmal / Code aufräumen
Das Skript gucke ich mir nochmal an... aber erwarte nicht zu viel von mir, ich kann JS nicht wirklich ;)
Dirk: Also Fehler sind auf jeden Fall drin, aber gleich in Zeile 1?
Zitat:Fehler: syntax error
Quelldatei: j%20http://kartwiki.cwsurf.de/other/pacman/select.html
Zeile: 1, Spalte: 50
Quelltext:
http://kartwiki.cwsurf.de/other/pacman/select.html
So sehen die ersten Zeilen aus, sollte man eigentlich den HTML-Tag noch verwenden?
Code:
<head>
    <link rel="STYLESHEET" href="style.css" type="text/css">
    <script type="text/javascript" src="fader.js"></script>
</head>
29.05.2010 10:08
Diese Nachricht in einer Antwort zitieren
gandro Offline
Quälgeist

Beiträge: 8.950
Registriert seit: Jul 2008
Beitrag #5
[Javascript] onClick funktioniert nur einmal / Code aufräumen
@niwax: Nur noch mehr JS-Libs darüberpappen macht die Sache ganz sicher nicht funktionaler.

@Topic:
Bezüglich: Funktioniert nur einmal:

Problem ist folgendes: Wie du siehst, wird die Funktion jeweils immer paarweise verwendet: Bei onmouseover und onmouseout.

Schaust du dir das Script an, dann siehst du, dass es dem Element selber Werte zuweist, also die Farbwerte zwischenspeichert (z.B. taget.r). Bei einem Aufruf mit anderen Farben ist das kein Problem, weil es zu einer anderen Farbe faden muss, bei einem Aufruf mit gleichen Farben sieht er die Arbeit als bereits erledigt an, und macht gar nix mehr.

Eine Möglichkeit wäre es, die if-Abfrage in Zeile 12 zu entfernen, dann funktioniert das auch mit onclick, allerdings siehts dann bei onmouseout scheisse aus, wenn du das Feld wieder zu früh verlässt, weil er da auch den Wert zurücksetzt.

Die imho elegantere Lösung (weil sie das Script in Ruhe lässt) ist es, onclick ebenfalls auf zwei Events aufzusplitten: onmousedown und onmouseup, z.B:

onmousedown="colorFade('games','background','FFFFFF','333333',25,50)" onmouseup="colorFade('games','background','333333','000000',25,50)"

Bezüglich: Codeaufräumen:

Du kannst die Event-Handler auch mit JavaScript selber setzen lassen, z.B:

document.getElementById("pacgoogle").onmouseout = function() { colorFade(this.id,'background','888888','333333',25,50); };

Und das kannst du ja dann in eine for/foreach-Schleife packen, wo du das für alle IDs machst.
(Dieser Beitrag wurde zuletzt bearbeitet: 29.05.2010 10:49 von gandro.)
29.05.2010 10:38
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Dirk Offline
Software Archäologe

Beiträge: 14.721
Registriert seit: Jul 2008
Beitrag #6
[Javascript] onClick funktioniert nur einmal / Code aufräumen
wegen fehlerkonsole: die zeigt auch noch alte fehler, ergo andere seiten. immer erst den verlauf da löschen.

29.05.2010 11:00
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
gandro Offline
Quälgeist

Beiträge: 8.950
Registriert seit: Jul 2008
Beitrag #7
[Javascript] onClick funktioniert nur einmal / Code aufräumen
Ja, es ist kein JS-Fehler der für onclick-Fail verantwortlich ist, wie ich oben erläutert habe.
29.05.2010 11:06
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
PacMani
Unregistered

 
Beitrag #8
[Javascript] onClick funktioniert nur einmal / Code aufräumen
Also das mit dem onmousedown und onmouseup bekomme ich trotzdem nicht zum Laufen :(
Meinst du das so?
Code:
<table id="games" onmousedown="colorFade('games','background','FFFFFF','333333',25,50)" onmouseup="colorFade('games','background','333333','000000',25,50)">

Das mit dem Aufräumen habe ich prinzipiell verstanden, aber wie formuliere ich in Javascript eine Schleife, bei der ich die Elemente durchgehe und auch nur die mit Events versehe, die mit pac* anfangen (oder die td's sind)?
30.05.2010 00:19
Diese Nachricht in einer Antwort zitieren
gandro Offline
Quälgeist

Beiträge: 8.950
Registriert seit: Jul 2008
Beitrag #9
[Javascript] onClick funktioniert nur einmal / Code aufräumen
Hm.. der Code funktioniert bei mir nur bei jedem zweiten Klick.. (reagieren tut er jedes mal, aber die Farbe ändert sich praktisch kaum).. lustig. Aber hat mit dem Script zu tun, auch wenn ich jetzt nicht genau herausfinden will, woran.

Elemente kannst du via DOM durchackern:
SELFHTML: JavaScript / Objektreferenz / document
SELFHTML: JavaScript / Objektreferenz / node

Wobei du für onclick eh das Script ja noch anpassen musst. Für beides brauchst du dann doch etwas Kenntnisse von Javascript (eine Sprache, von der jeder meint, dass er sie ansatzweise kann, doch im Detail hat die Sprache einiges mehr).

Von daher, wenn du nicht gewillt bist dich in JS/DOM einzuarbeiten, schau dir ggf. mal JQuery an, für deine Zwecke wohl passender als die oben genannten Prototype oder Scriptaculous, weil eine sehr tolle und einfache API zum Elementen zu selektieren: Why does everyone like jQuery more than prototype/script.aculo.us or mootools or whatever? - Stack Overflow

jQuery hat auch nen Fader, das heisst du kriegst deine Wünsche mit 2-3 Zeilen jQuery-Aufrufen hin.


Nachtrag: Ich sehe gerade, jQuery kann so einfach nicht Farben faden, nur Transparenz. Das wird aufwändiger.
30.05.2010 11:03
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
niwax Offline
Hardcore-Coder

Beiträge: 3.829
Registriert seit: Dec 2009
Beitrag #10
[Javascript] onClick funktioniert nur einmal / Code aufräumen
So sehen die ersten Zeilen aus, sollte man eigentlich den HTML-Tag noch verwenden?
Code:
<head>
    <link rel="STYLESHEET" href="style.css" type="text/css">
    <script type="text/javascript" src="fader.js"></script>
</head>
[/quote]
Welchen Tag würdest du sonst nehmen? Tipp: Stell auf XHTML-Strict um, dann ists leichter zu entscheiden, was reinsoll und was nicht.
@Dirk: Die Webdeveloper Toolbar ist noch besser als n ur die Fehlerkonsole, wenn die keine Fehler meldet, dann stimmt (fast) alles


31.05.2010 16:58
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Neue Antwort schreiben 


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste