Schleife mit CreateAttribute mit window.open nur einmal
gundelfisch
- javascript
0 gundelfisch0 molily
Ich will in alle Bilder einer html dynamisch ein onlick mit window.open einfügen. Das funzt aber nur für das 1. Bild, aber mit onclick + alert geht's für alle 3!! Das Beispiel:
<html><body>
<div id ="content_container">
<img src="bild1.jpg" />
<img src="bild2.jpg" />
<img src="bild3.jpg" />
</div>
<script type="text/javascript">
function popup (Adresse) {
popup=window.open(Adresse,"popup","width=600,height=600");
popup.focus();
}
var bereich = document.getElementById("content_container");
var bilder = bereich.getElementsByTagName("img");
for (i = 0; i < bilder.length; i++) {
var valert = document.createAttribute("onclick");
valert.nodeValue = "alert(this.src);";
var vopen = document.createAttribute("onclick");
vopen.nodeValue = "popup(this.src);return false";
bilder[i].setAttributeNode(vopen);
<!--bzw. bilder[i].setAttributeNode(valert); -->
}
</script>
</body></html>
Noch als Ergänzung: das popup geht nur beim ersten Clicken auf ein beliebiges der 3 Bilder, danach auf gar keines mehr.
var valert = document.createAttribute("onclick");
valert.nodeValue = "alert(this.src);";
var vopen = document.createAttribute("onclick");
vopen.nodeValue = "popup(this.src);return false";bilder[i].setAttributeNode(vopen);
<!--bzw. bilder[i].setAttributeNode(valert); -->
1. Benutze NIE createAttribute und setAttributeNode. Das ist umständlich und nicht browserübergreifend.
2. Besser ist es, die Objekteigenschaften direkt zu setzen: element.attributname = "attributwert";
4. Das Registrieren von Event-Handlern ist eine Ausnahme. Nutze das traditionelle Event-Handling: element.onclick = handlerfunktion;
Das heißt, du notierst die Handlerfunktion:
function clickHandler () {
popup(this.src);
};
Und in der Schleife registrierst du die Handler:
bilder[i].onclick = handler;
Mathias
Hallo Mathias,
danke für deine prompte Antwort und tollen Tipps!
Meine Variante mit CreateAttribut hatte ich mir hier im Selfhtml angelesen und gar nicht mitbekommen, dass es out of fashion ist..
Jetzt habe ich deine elegantere Lösung ausprobiert, aber leider mit demselben Ergebnis wie in meiner Ergänzung vorhin beschrieben. Da ich vermutete, dass es am this.src liegt, habe ich extra nochmal in der Schleife ein
var vsrc= bilder[i].src;
eingebaut und diese an den Clickhandler übergeben - erfolglos.
Das es ja mit alert statt popup funktioniert, könnte es vllt. daran liegen, dass open ein neues Objekt erzeugt, was dann die dynamische Änderung im 1. Window-Objekt kaputtmacht???
Hallo Mathias,
ok, jetzt habe ich gerade durch Rumprobieren doch selbst die richtige Lösung gefunden:
in der Definiton des Clickhandlers nicht die vorher definierte Funktion popup aufrufen, sondern direkt das window.open - nun läuft's wie gewünscht (warum auch immer)!!
Nochmals Danke, auch für deinen Link auf das neue Javascript. Dort steht ja auch, dass man keine Parameter an Eventhandler übergeben darf...