Mit DOM "onclick" setzen?
lighti
- javascript
0 Mathias Brodala0 D.R.0 lighti
Hallo,
ich beschäftige mich zur Zeit mit Javascript und bin dabei auf ein Problem gestoßen.
Ich möchte mittels DOM ein <p>-Element an den <body> hängen. Dies sieht bei mir so aus und klappt auch einwandfrei:
----------------------------------------------------------
var text = document.createTextNode("Hallo Welt!");
var element = document.createElement("p");
element.appendChild(text);
document.getElementsByTagName('body')[0].appendChild(element);
-----------------------------------------------------------------
Jetzt möchte ich dem <p> Element das onclick-Attribut hinzufügen. Dazu benutze ich setAttributeNode():
----------------------------------------------------------
var attribut = document.createAttribute("onClick");
attribut.nodeValue = "alert('Juhu!')";
document.getElementsByTagName("p")[0].setAttributeNode(attribut);
----------------------------------------------------------
Mein Problem ist, dass der IE das anscheinend nicht versteht (in anderen Browsern, wie Firefox und Opera, geht es einwandfrei).
Braucht der IE also eine "Alternativversion" oder wird das bei ihm so oder so nicht funktionieren?
Bei Selfhtml steht ja, dass der IE mit setAttribute() und setAttributeNode() Probleme bezüglich der Groß/Kleinschreibung hat, aber bei mir funktioniert weder "onclick" noch "onClick" o.ä. ?
Danke für jede Hilfe,
Lighti
Hallo lighti.
Ich möchte mittels DOM ein <p>-Element an den <body> hängen. Dies sieht bei mir so aus und klappt auch einwandfrei:
var text = document.createTextNode("Hallo Welt!");
var element = document.createElement("p");element.appendChild(text);
document.getElementsByTagName('body')[0].appendChild(element);
Jetzt möchte ich dem <p> Element das onclick-Attribut hinzufügen. Dazu benutze ich setAttributeNode():
Du musst einen sehr merkwürdigen Browser nutzen, wenn dieser augenscheinlich nicht über eine Suchfunktion verfügt, welche dir diesen Thread auf der aktuellen Forumshauptseite offenbart hätte.
Einen schönen Samstag noch.
Gruß, Mathias
Hallo,
ich beschäftige mich zur Zeit mit Javascript und bin dabei auf ein Problem gestoßen.
Ich möchte mittels DOM ein <p>-Element an den <body> hängen. Dies sieht bei mir so aus und klappt auch einwandfrei:
var text = document.createTextNode("Hallo Welt!");
var element = document.createElement("p");element.appendChild(text);
document.getElementsByTagName('body')[0].appendChild(element);
Das würde ich nicht so kompliziert machen (auch wenn's so in der Doku steht).
var element = document.createElement("p");
element.appendChild(document.createTextNode("Hallo Welt!"));
document.body.appendChild(element);
Jetzt möchte ich dem <p> Element das onclick-Attribut hinzufügen. Dazu benutze ich setAttributeNode():
var attribut = document.createAttribute("onClick");
attribut.nodeValue = "alert('Juhu!')";
document.getElementsByTagName("p")[0].setAttributeNode(attribut);
Auch das geht einfacher:
element.onclick = function(){alert('Juhu!')};
Braucht der IE also eine "Alternativversion" oder wird das bei ihm so oder so nicht funktionieren?
obige Version funktioniert in allen Browsern und ist auch sinnvoller, weil onclick ja ein Eventhandler und kein Attribut ist.
Bei Selfhtml steht ja, dass der IE mit setAttribute() und setAttributeNode() Probleme bezüglich der Groß/Kleinschreibung hat, aber bei mir funktioniert weder "onclick" noch "onClick" o.ä. ?
Nicht nur bezüglich der Kleinschreibung. Er kann z.B. auch setAttribute("class","x");
nicht umsetzen, weil er scheinbar keine Attribute kennt. Stattdessen setzt er Eigenschaften.
mfg. Daniel
Auch das geht einfacher:
element.onclick = function(){alert('Juhu!')};
Vielen Dank, jetzt funktionierts.
Allerdings versteh ich das nicht wirklich :(. Wieso muss man eine Funktion dahinter definieren und nicht einfach den gewünschten Befehl?
Du musst einen sehr merkwürdigen Browser nutzen, wenn dieser augenscheinlich nicht über eine Suchfunktion verfügt, welche dir diesen Thread auf der aktuellen Forumshauptseite offenbart hätte.
Ich denke, es liegt nicht an meinem merkwürdigen Browser, sondern an meiner merkwürdigen Art, passende Suchwörter zu finden... :)
Jedenfalls danke für den Link.
Hallo lighti.
element.onclick = function(){alert('Juhu!')};
Vielen Dank, jetzt funktionierts.
Allerdings versteh ich das nicht wirklich :(. Wieso muss man eine Funktion dahinter definieren und nicht einfach den gewünschten Befehl?
Eventhandler werden beim Eintreten des jeweiligen Ereignisses aktiviert. Wurde ihnen nun eine Funktionsreferenz zugewiesen, so wird diese Funktion dann aufgerufen.
Das heißt, dass du obiges auch wie folgt notieren könntest:
function foo() {
alert('Juhu!');
}
element.onclick = foo;
Beim Eintreten des „click“-Ereignisses wird nun die Funktion aufgerufen, die unter dem Namen „foo“ referenziert ist.
(Es gäbe noch eine dritte Möglichkeit über das Erzeugen eines Funktionsobjektes, aber diese Variante wird selten benötigt.)
Einen schönen Samstag noch.
Gruß, Mathias
Das heißt, dass du obiges auch wie folgt notieren könntest:
function foo() {
alert('Juhu!');
}element.onclick = foo;
>
> Beim Eintreten des „click“-Ereignisses wird nun die Funktion aufgerufen, die unter dem Namen „foo“ referenziert ist.
Achso, ich glaube, jetzt versteh ich's.
Danke.