onload-Änderung von onclick-Ereignissen

[Martin]

Ich versuche auf Divs mit bestimmten ID Aufbau eine onclick-Funktion zu setzen.

Die Selektion der Divs usw. funktioniert. Die Zeile, die das dann macht lautet:

divsAnchors[i].onclick = function() { changeVisibility(sectionId);

Nun ist aber sectionId dabei eine Variable und ich hätte gerne deren Inhalt in der Funktion, nicht den Text "sectionID".

Weiß jemand, wie man das dann angeben muss/kann?

DANKE

[wahsaga]

hi,

Nun ist aber sectionId dabei eine Variable und ich hätte gerne deren Inhalt in der Funktion, nicht den Text "sectionID".

Weiß jemand, wie man das dann angeben muss/kann?

Wenn der Wert von sectionId für jedes Element ein anderer ist (andernfalls könntest du es ja einfach als globale Variable nutzen), dann machst du es dir m.E. am einfachsten, wenn du diesen Wert als Eigenschaft an das jeweilige Div bindest:

divsAnchors[i].sectionId = sectionId;
divsAnchors[i].onclick = changeVisibility;

Innerhalb von changeVisibility hast du über this Zugriff auf das Div-Element, auf dem der Event ausgelöst wurde, und damit über this.sectionId auch Zugriff auf die Eigenschaft.

gruß,
wahsaga

[Martin]

hi,

Nun ist aber sectionId dabei eine Variable und ich hätte gerne deren Inhalt in der Funktion, nicht den Text "sectionID".

Weiß jemand, wie man das dann angeben muss/kann?

Wenn der Wert von sectionId für jedes Element ein anderer ist (andernfalls könntest du es ja einfach als globale Variable nutzen), dann machst du es dir m.E. am einfachsten, wenn du diesen Wert als Eigenschaft an das jeweilige Div bindest:

divsAnchors[i].sectionId = sectionId;
divsAnchors[i].onclick = changeVisibility;

Innerhalb von changeVisibility hast du über this Zugriff auf das Div-Element, auf dem der Event ausgelöst wurde, und damit über this.sectionId auch Zugriff auf die Eigenschaft.

gruß,
wahsaga

zuerst noch ergänzend: sectionId hängt mit den divs nur über id postfixes zusammen (im DOM gibt es keine vorher definierte Relation)

Bsp: <div id="foldAnchorFold1"> soll das Auf- und Zuklappen von <div id="foldSectionBlockFold1"> irgendwo in der Seite steuern

Zu deiner Antwort: heißt das, ich kann nach Belieben Elemente in den DOM hängen (die der Browser gar nicht zuordnen kann)?
dann würds so aussehen, oder?

divsAnchors[i].sectionId = sectionId;
divsAnchors[i].onclick = funktion() { changeVisibility(this.sectionId); }

[wahsaga]

hi,

zuerst noch ergänzend: sectionId hängt mit den divs nur über id postfixes zusammen (im DOM gibt es keine vorher definierte Relation)

Bsp: <div id="foldAnchorFold1"> soll das Auf- und Zuklappen von <div id="foldSectionBlockFold1"> irgendwo in der Seite steuern

Gut, also wie Struppi auch vermutet hat: Du hast zur Laufzeit, wenn du den Event dynamisch an das Element binden willst, einen immer individuellen Wert vorliegen, den du in der Behandlung des Events nutzen willst.

Zu deiner Antwort: heißt das, ich kann nach Belieben Elemente in den DOM hängen (die der Browser gar nicht zuordnen kann)?

Das machst du damit ja gar nicht.

divsAnchors[i] exisitiert ja bereits, es ist ein Javascript-Objekt.
Und diesem fügst du lediglich eine weitere Eigenschaft hinzu, eben .sectionId
Diese Eigenschaft ist nichts großartig anderes als eine Variable.
Wenn du global eine Variable xyz hast, wäre diese an das window-Element gebunden - und du könntest auf sie auch über window.xyz oder window[xyz] zugreifen.

Hier machst du nichts anderes - nur nicht mit window, sondern du bindest die Eigenschaft direkt an das Element, welches sie anschließend benötigt.

dann würds so aussehen, oder?

Nein, nicht ganz, sondern so, wie ich schrieb:

divsAnchors[i].sectionId = sectionId;
divsAnchors[i].onclick = changeVisibility;

changeVisibility nochmals in eine anonyme Funktion zu kapseln, kannst du dir hier sparen. Da du keinen Parameter mehr übergeben musst, kannst du der onclick-Eigenschaft des Elements gleich die Funktionsreferen changeVisibility zugreifen.

Und _innerhalb_ der Funktion changeVisibility kannst du dann über this auf das Element, und über this.sectionId auf die vorher an dieses gebundene Eigenschaft zugreifen.

function changeVisibility() {
   alert(this.sectionId);
}

gruß,
wahsaga

[wahsaga]

hi,

Korrektur:

changeVisibility nochmals in eine anonyme Funktion zu kapseln, kannst du dir hier sparen. Da du keinen Parameter mehr übergeben musst, kannst du der onclick-Eigenschaft des Elements gleich die Funktionsreferen changeVisibility zugreifen.

Sollte hier am Ende natürlich _zuweisen_ heißen.

gruß,
wahsaga

[Martin]

habs jetzt gecheckt - war der Meinung, dass .xxx ein Attribut wäre, aber Eigenschaft<>Attribute.
Das mit window und Variable war sehr hilfreich fürs Verständnis.

Jetzt funktionierts auch wie beabsichtigt.

Danke

[Struppi]

habs jetzt gecheckt - war der Meinung, dass .xxx ein Attribut wäre, aber Eigenschaft<>Attribute.

.xxx ist auch ein Attribut, du kanst aber jedem beliebigen Objekt jedes x-beliebige Attribut zuweisen (zumindest prinzipiell, es gibt Attribute, die nicht überschrieben werden dürfen [z.b. das style Attribut von HTML Elementen oder unvorhersehbare Ereignisse auslösen können).

Struppi.

[Struppi]

Gut, also wie Struppi auch vermutet hat: Du hast zur Laufzeit, wenn du den Event dynamisch an das Element binden willst, einen immer individuellen Wert vorliegen, den du in der Behandlung des Events nutzen willst.

Nö, das hatte ich nicht vermutet ;-)

Ich dachte eher das das Element evtl. ein parent oder child ist.
Allerdings geht aus dem bisherigen Code nicht hervor woher sectionId kommt, ob das eine statische Variabel ist oder sich jedesmal ändert. Insofern läßt sich weiterhin nur vermuten, welches die sinnvollste Lösung ist, die mit dem Attribut ist auf jedenfall am flexibelsten.

Struppi.

[Struppi]

divsAnchors[i].onclick = function() { changeVisibility(sectionId);

Nun ist aber sectionId dabei eine Variable und ich hätte gerne deren Inhalt in der Funktion, nicht den Text "sectionID".

Weiß jemand, wie man das dann angeben muss/kann?

Wenn die sectionId gleich der id von divsAnchors[i] ist, kannst du hier auch mit this arbeiten.

Es gäbe aber noch andere Möglichkeiten, je nach dem in welchem Verhältniss, das Element dass du anklicken willst mit dem dessen Sichtbarkeit du ändern willst, stehen.

Struppi.