Problem nach Auslagern von Inline Event Handlern

[Sven Mintel]

Das Beispiel hättest du früher zeigen sollen

colorset[7] = "__color_nildays";

......

<input id="__color_nilsdayObj" name="colorinput" type="text" size="7" />

.......

<td id="__color_nilsday">&nbsp;</td>

Fällt dir etwas auf?

Weiterhin:

lasse dir in der Funktion

addEvent(colorelement,'change',function changeColor(id) {
       var color = getObj(id + 'Obj').value;
       var link = getObj(id);
       if (color == '') {
         link.style.backgroundColor = nocolor;
         link.style.color = nocolor;
         color = nocolor;
       } else {
         link.style.backgroundColor = color;
         link.style.color = color;
       }
       eval(getObj(id + 'Obj').title);)
    }

....mal testhalber id.type ausgeben, du wirst staunen, was das ist
Der Grund: bei einer Eventüberwachung wird der Event selbst als Argument übergeben, sonst nichts.

Lösung:
per New Function() kann man den Funktions-Body als String definieren, dieser String würde bereits beim init() ausgewertet. Du musst so kein Argument an die Funktion übergeben.
Einfacher:
den <input>'s gebe als ID den Basis-Bestandteil, also ohne das "Obj"
Dann brauchst du keine Argumente übergeben, denn seine ID weiss das <input> selbst

this.id

Weiterhin:

var colorelement = document.getElementById(id);

den change-Event willst du doch im <input> überwachen, dann müsste es heissen:

var colorelement = document.getElementById(id+'Obj');

 

[shredder01]

Das Beispiel hättest du früher zeigen sollen

Hm, hab ich doch: http://www.tutorials.de/forum/javas...rn-von-inline-event-handlern.html#post1798741 und im ersten Post war zumindest der Javascript-Teil mit enthalten.

Ok, das mit nilsday und nildays ist natürlich nun die dritte Peinlichkeit in Folge, aber das ist im Originalskript korrekt enthalten. Dort werden alle drei Stellen (Array, Input-ID und Td-ID) aus einer Quelle dynamisch "befüllt". Da war ich wohl nur zu blöd für's Testskript alles korrekt zu übernehmen.

bei einer Eventüberwachung wird der Event selbst als Argument übergeben, sonst nichts

Aha? Ich hatte dazu irgendwo im Netz einen Beitrag gefunden, das man Argumente übergeben kann, wenn man die Funktion so komplett an addEvent übergibt wie ich es hier gemacht habe.
Vorher hatte ich einfach bloß

addEvent(colorelement,'change',changeColor,false);

und dann function changeColor extra definiert.
Dann war das also eine Fehlinformation. Ich hab's leider nicht als Bookmark abgespeichert, aber wenn ich's nochmal finde werd' ich's hier posten.

den change-Event willst du doch im <input> überwachen, dann müsste es heissen:
Code:

var colorelement = document.getElementById(id+'Obj');

Stimmt! Da hast Du auch recht. Hab ich geändert.

per New Function() kann man den Funktions-Body als String definieren, dieser String würde bereits beim init() ausgewertet. Du musst so kein Argument an die Funktion übergeben.

Das verstehe ich im Moment noch nicht, aber da mache ich mich mal schlau.

den <input>'s gebe als ID den Basis-Bestandteil, also ohne das "Obj"
Dann brauchst du keine Argumente übergeben, denn seine ID weiss das <input> selbst

Hm, aber ich brauche ja auch die IDs an den Tabellenzellen und ich kann doch dieselbe ID nicht zweimal vergeben?

Nun ja, meine Variante ist natürlich ziemlich "unelegant" (vor allem im Vergleich mit Deiner Lösung), aber hauptsächlich geht es mir ja erstmal darum korrektes Auslagern von Eventhandlern hinzubekommen.

Und noch mal zur Sache mit den Leerzeichen im Zusammenhang mit Deiner Lösung: Findet Javascript dann den nextsibling nicht, oder worin besteht da das Problem?

Danke nochmal für die Hilfe.

 

[Sven Mintel]

Hm, hab ich doch:

Tatsache, hab ich wohl übersehen

Und noch mal zur Sache mit den Leerzeichen im Zusammenhang mit Deiner Lösung: Findet Javascript dann den nextsibling nicht, oder worin besteht da das Problem?

Naja, es ist Browserabhängig, der IE bspw. findet die korrekte <td>
Es ist aber so, dass Whitespaces auch einen Knoten darstellen...einen Textknoten.
Und andere Browser, wie bspw. FF finden diesen Textknoten(korrekterweise)...was aber in dem Fall ungünstig ist.

 

[shredder01]

Ok, ich hab meine Variante jetzt auch zum Laufen bekommen. Ich hab jetzt einfach die IDs der inputs und der tds vertauscht, also bei den inputs die ID ohne "Obj" und bei den tds mit. Und dann die entsprechende ID einfach mit this.id geholt. So funktioniert es.

Was jetzt noch nicht so funktioniert wie bei der Ausgangsvariante mit den Inline-Eventhandlern: Die Tabellenzellen sind beim ersten Aufruf der Seite noch nicht eingefärbt, auch wenn ich den Inputs schon Defaultwerte mitgebe.
Einerseits verständlich, andererseits verstehe ich nicht warum das bei der alten Variante funktionierte. Ich sehe da in dem HTML-Schnipsel in meinem ersten Post nichts was dafür sorgen könnte.

Hier, mit den Inline-Geschichten, http://designxxl24.de/wp-test/test3.html ist die Zelle vorgefärbt und hier, mit der selben Funktion (oder sollte ich was übersehen haben?) http://designxxl24.de/wp-test/test2.html aber ohne Inline-Geschichten, nicht.
Na mal schauen.

 

[Sven Mintel]

Du hast im anderen Beispiel ein <script>-Block in der Zelle, dort steht die Aneisung zum Einfärben.

Füge in dem aktuellen Skript hiernach:

var colorelement = document.getElementById(id);

folgendes ein:

getObj(id + 'Obj').style.backgroundColor=colorelement.value;

dann gehts auch damit

 

[shredder01]

Stimmt, Du hast recht!
Da hab ich ganz übersehen, dass dort kein onChange steht.

Danke noch mal.