JS setAttribute()

[Loon3y]

Moinsen..

weiß einer eine Möglichkeit, bzw eine Alternative, wie man mittels DOM Elemente kreeiert / manipuliert, die JS-funktionalitäten beinhalten?

Einfaches Beispiel:

html:

<a id="link" href="link.htm" title="link">
 Linkname
</a>

wird mittels JS manipuliert:

<script type="text/JavaScript">

var anchor = document.getElementById('link');
anchor.setAttribute('href', '#');
anchor.setAttribute('onclick', 'somefunc(param); return false;');
anchor.innerHTML = 'neuer Linkname';

</script>

Jetzt kommt folgendes raus:

<a id="link" href="[B]#[/B]" title="link" [B]onclick="somefunc(param);return false;"[/B]>
  [B]neuer Linkname[/B]
</a>

Schön und gut, funktioniert auch...allerdings...wenn ich im IE den Link nun anklicke, führt er mir die Funktion nicht aus. Wieso das? Liegt es daran, dass er nicht das Attribute "onclick" kennt, bzw er "denkt", dass ich mit setAttribute() HTML-Attribute nur setzen kann?


Danke schonmals für die Hilfe..
Loon3y

 

[struppi]

Wozu einen Link, wenn du gar kein Ziel angeben willst?
Du kannst jedes Element mit JS anklicken.

Das geht so (wurde aber hier sicher schon zig tausendmal gezeigt)

var anchor = document.getElementById('link');
anchor.onclick = function(event) { somefunc(param); };
anchor.innerHTML = 'neuer Linkname';

 

[Loon3y]

Wozu einen Link, wenn du gar kein Ziel angeben willst?

ist auch nur ein ausschnitt aus dem code gewesen, bzw ein "schnell getipptes" Beispiel fürs forum..

Du kannst jedes Element mit JS anklicken.

Nein, so stimmt das auch wieder nicht. Nicht jedes Element ist für onclick verwendbar (bzw. würde Sinn ergeben).

Das geht so (wurde aber hier sicher schon zig tausendmal gezeigt)

EDIT: fehler lag an einer anderen Stelle...welcher nicht angezeigt wurde...*schulterzuck*...


Gruß
Loon3y

 

[Gilles]

Hab auch mal das Problem mit setAttribute gehabt. Das mag der IE garnicht. Deswegen greife ich direkt auf die Attribute zu. Das kann jeder Browser (zumindest alle neueren seit IE 5)

var elem = document.getElementById("meinElement");
elem.href = "test.html";
elem.onclick = function() {
  // do that
};

Das einzige Problem bei elem.onclick ist, dass es den alten Eventlistener für das Objekt überschreibt.
Das heisst du kannst nicht an einer Stelle sagen:

elem.onclick = sayHello;

// und zweite Eventlistener

elem.onclick = sayGoodBye;

Leider wird der Event-Listener beim zweiten mal setzen wieder überschrieben, sodass nur sayGoodBye ausgeführt wird.
Um mehrere Eventhandler an ein Objekt zu hängen benutzt man addEventListener, was leider aber nur im Firefox klappt. Es gibt aber Crossbrowsing-Scripte für Event-Listener. Einfach mal suchen wenn du mal so etwas benötigen solltest.

Aber b2t:
Benutze die von mir geschriebene Schreibweise

 

[crash]

addEventListener() funktioniert auch in Opera, Safari etc. prima. Nur IE macht mucken (historisch bedingt). Einen Wrapper gibt es hier: design-noir | Webentwicklung | JavaScript | addEvent & removeEvent

 

[struppi]

Nein, so stimmt das auch wieder nicht. Nicht jedes Element ist für onclick verwendbar (bzw. würde Sinn ergeben).

Ok, jedes sichtbare Element. Aber es macht auch keinen Sinn, einen Verweis ohne Verweis zu verwenden