Bilderwechsel

[hawkmaster]

Hallo zusammen,
in einer <select> box sind grafiknamen gelistet.
<select name="sel_productimage" onclick="image(this);">
..

Wenn man einen eintrag auswählt, wird nebenan in einem DIv "productimage" die Grafik anzgezeigt.
Das klappt soweit.
Nur wird bei jedem neuen Klick neben dem alten Bild noch ein neues angezeigt. Das alte wird also nicht ersetzt.
Ich kapier nicht ganz wie ich das "löschen" des vorherigen Bildes machen kann.
Bin für jeden Tipp dankbar.

  
function image(selimageobj) {  
	for(i=0;i<selimageobj.length;i++){  
		if(selimageobj.options[i].selected){  
			var imgurl = selimageobj.options[i].value + ".gif";  
		}  
	}  
	var img = document.createElement("IMG");  
	img.src = "../image/icons/products/" + imgurl;  
	document.getElementById('productimage').appendChild(img);  
  

vielen Dank und viele Grüße
hawk

[Felix Riesterer]

Lieber hawkmaster,

Wenn man einen eintrag auswählt, wird nebenan in einem DIv "productimage" die Grafik anzgezeigt.

ja, und zwar, indem ein neues Bild erstellt wird, welches dann in dieses <div>-Element eingepflanzt wird.

Nur wird bei jedem neuen Klick neben dem alten Bild noch ein neues angezeigt. Das alte wird also nicht ersetzt.

Dein Script sollte also das jeweils zuvor neu erzeugte Bild-Objekt löschen... oder besser nur dann ein Bild-Objekt in das <div>-Element schreiben, wenn dort noch keines ist und ansonsten die URL des vorhandenen Bildes aktualisieren.

Ich plädiere deshalb zu letzterem Vorgehen, da Du damit sogenannte Memory-Leaks im Internet Explorer vermeiden kannst.

Ich kapier nicht ganz wie ich das "löschen" des vorherigen Bildes machen kann.

Dann beschäftige Dich mit den Grundlagen, denn sonst lautet Dein Posting hier so ähnlich wie "ich hätte gerne {wunsch} und kann's selbst nicht, also bitte macht das mal für mich".

Bin für jeden Tipp dankbar.

OK. Dann experimentiere einmal mit http://de.selfhtml.org/javascript/objekte/node.htm#remove_child@title=removeChild().

Liebe Grüße,

Felix Riesterer.

[hawkmaster]

Hallo Felix,
vielen Dank für deine Hilfe.

OK. Dann experimentiere einmal mit http://de.selfhtml.org/javascript/objekte/node.htm#remove_child@title=removeChild().

Du wirst es vielleicht nicht glauben, aber das hatte ich sogar schon in der Funktion drin. Ich hatte mir das auch schon im Manual durchgelesen.
Mir ist nur nicht klar wie ich das vorhandene alte Image prüfen kann?
Es hat ja keinen Namen oder eine Id.

vielen Dank und viele Grüße
hawk

[Felix Riesterer]

Lieber hawkmaster,

Mir ist nur nicht klar wie ich das vorhandene alte Image prüfen kann?
Es hat ja keinen Namen oder eine Id.

aber das <div>-Element hat einen. Und mit <meinDivElement>.[ref:self812;javascript/objekte/node.htm#get_elements_by_tag_name@title=getElementsByTagName]("img") bekommst Du alle <img>-Elemente innerhalb Deines <div>-Elements in einer Art Array zurück!

Liebe Grüße,

Felix Riesterer.

[hawkmaster]

Hallo Felix,
danke für deine Geduld,
dann war ich eigentlich nicht ganz verkehrt mit meinen ersten Versuchen.
Allerdings:
Was ich dann nicht verstehe warum die Prüfung mit
if(div.getElementsByTagName("img")){

nicht geht auch wenn ich zum erstenmal klicke, also noch kein Bild da ist?

  
var div = document.getElementById('productimage');  
if(div.getElementsByTagName("img")){  
alert('hallo');  
var Knoten = div.getElementsByTagName("img").firstChild;  
verschwunden =    div.getElementsByTagName("img").removeChild(Knoten);  
}  

vielen Dank und viele Grüße
hawk

[ChrisB]

Hi,

Was ich dann nicht verstehe warum die Prüfung mit
if(div.getElementsByTagName("img")){
nicht geht auch wenn ich zum erstenmal klicke, also noch kein Bild da ist?

Weil du selbstverständlich auch dann eine NodeList von der Methode zurückbekommst, die im boole'schen Kontext zu true ausgewertet wird, auch wenn sie keine Elemente enthalten mag.

Frage die Länge der NodeList über die Eigenschaft length ab.

MfG ChrisB

[hawkmaster]

Hallo Felix,
so ein wenig weiter bin ich nun gekommen.
Die Prüfung ob das Bild schon da ist , klappt nun.
Aber das entfernen mit removeChild geht nicht.

if(div.getElementsByTagName("img")[0]){
    //alert('hallo');
var Knoten = document.getElementsByTagName("img")[0].firstChild;
    verschwunden = document.getElementsByTagName("img")[0].removeChild(Knoten);
}
vielen Dank und viele Grüße
hawk

[Der Martin]

Hallo,

Aber das entfernen mit removeChild geht nicht.

nein, du hast da noch ein Verständnisproblem.

  var Knoten = document.getElementsByTagName("img")[0].firstChild;  

verschwunden = document.getElementsByTagName("img")[0].removeChild(Knoten);

Du sprichst das Bild an, das du entfernen willst, und forderst es auf, eins seiner Kindelemente zu entfernen. Dabei hat es gar keine (kann auch keine haben). Überlege nochmal, *welches* Objekt du anweisen musst, sein Kind in die Wüste zu schicken.
Nicht das Bild. Das kann sich nicht selbst entsorgen.

So long,
 Martin

[hawkmaster]

Hallo

Du sprichst das Bild an, das du entfernen willst, und forderst es auf, eins seiner Kindelemente zu entfernen. Dabei hat es gar keine (kann auch keine haben). Überlege nochmal, *welches* Objekt du anweisen musst, sein Kind in die Wüste zu schicken.
Nicht das Bild. Das kann sich nicht selbst entsorgen.

hmm, also irgendwie steht mir einer auf der Leitung.
Das Image ist doch ein Kind element des Div (productimage) oder?
Also muss ich doch dann dem Div sein Kind Element entfernen?

Wenn ich es dann so versuche:
var Knoten = document.getElementById('productimage')[0].firstChild;
 verschwunden = document.getElementById('productimage')[0].removeChild(Knoten);

klappt es erst wieder nicht. Ich kapiers nicht :-(

vielen Dank und viele Grüße
hawk

[hawkmaster]

Na jetzt habe ich es doch noch hinbekommen :-)

var w = document.getElementById("productimage");
w.removeChild(document.getElementsByTagName("img")[0]);

Aber ehrlich gesagt. Die Schreibweise ist mir nicht ganz klar.
Warum braucht man das [0] noch hinter ["img"]  ?

vielen Dank und viele Grüße
hawk

[ChrisB]

Hi,

var w = document.getElementById("productimage");
w.removeChild(document.getElementsByTagName("img")[0]);

Aber ehrlich gesagt. Die Schreibweise ist mir nicht ganz klar.
Warum braucht man das [0] noch hinter ["img"]  ?

Weil getElementsByTagName dir eine NodeList liefert - eine *Liste* von HTML-Elementen.

MfG ChrisB

[ChrisB]

Hi,

Das Image ist doch ein Kind element des Div (productimage) oder?
Also muss ich doch dann dem Div sein Kind Element entfernen?

Ja.

Wenn ich es dann so versuche:
var Knoten = document.getElementById('productimage')[0].firstChild;
verschwunden = document.getElementById('productimage')[0].removeChild(Knoten);

klappt es erst wieder nicht. Ich kapiers nicht :-(

Dann kappiere bitte wenigstens und endlich mal, das „klappt nicht“ keine brauchbare Problembeschreibung ist.

Dass eine ID dokumentweit eindeutig zu sein hat, weisst du doch wohl?
Also ergibt es keinen Sinn, das, was getElementById zurückliefert, mit einem Index ansprechen zu wollen - es gibt immer entweder genau ein oder kein Element zurück.

Gewöhne dir bitte an, beim Entwickeln von JavaScripten auch die Fehlerkonsole zu nutzen.

MfG ChrisB

[hawkmaster]

Hallo ChrisB,
auch dir vielen Dank für deine Geduld und Mühe.

Gewöhne dir bitte an, beim Entwickeln von JavaScripten auch die Fehlerkonsole zu nutzen.

Ich verwende den Firebug IMMER und schaue hier sofort die Fehler an.
Nur sind für mich manchmal die Fehler nicht sofort ersichtlich oder deutbar.
Nur als Beispiel ein Fehler der aufgetreten war:

uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER)"  nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)"  location: "JS frame :: http://localhost/product_new_change.inc.php?first=yes&newproduct=yes :: image :: line 22"  data: no]

Line 0

Also hier muss ich paasen. Ein "undefined" oder anderes kann ich noch deuten.
Aber du hast natürlich schon Recht. Mit "geht nicht" oder "klappt nicht" kann niemand was anfangen.

vielen Dank nochmals.

vielen Dank und viele Grüße
hawk

[Der Martin]

Hi,

Du sprichst das Bild an, das du entfernen willst, und forderst es auf, eins seiner Kindelemente zu entfernen. Dabei hat es gar keine (kann auch keine haben). Überlege nochmal, *welches* Objekt du anweisen musst, sein Kind in die Wüste zu schicken.
Nicht das Bild. Das kann sich nicht selbst entsorgen.
hmm, also irgendwie steht mir einer auf der Leitung.

dann schubs ihn mal. ;-)

Das Image ist doch ein Kind element des Div (productimage) oder?
Also muss ich doch dann dem Div sein Kind Element entfernen?

Richtig!
Wir haben also folgendes, wenn ich dich richtig verstehe:

<div id="productimage">  
   <img ... />  
</div>

Dabei steht das img-Element nicht im ursprünglichen Quellcode, sondern wurde nachträglich dynamisch ins DOM eingefügt (spielt aber keine Rolle).

var Knoten = document.getElementById('productimage')[0].firstChild;

This is bogus. Wenn document.getElementById('productimage') das div-Element repräsentiert, was machst du dann mit dem Index? Die Referenz auf das div hat selbst keinen Array-Charakter. Streich das ersatzlos.
Mit der Eigenschaft firstChild greifst du dann -wie überraschend- auf den ersten Kindknoten zu. Das ist das Bild. - Wirklich? Es könnte auch ein Textknoten sein (Zeilenumbruch, Leerzeichen)! Sicherer ist es, das Bild innerhalb des div-Elements mit getElementsByTagName() zu suchen. Diese Methode liefert wieder sowas wie ein Array, von dem du das erste Element haben willst. DANN wäre auch der Index wieder sinnvoll.
Aber in jedem Fall musst du mit zwei Nodes jonglieren: Mit dem div-Element und dem Bild.

Ich kapiers nicht :-(

Doch, bestimmt. Mal schön langsam, Schritt für Schritt zum Mitdenken:

var theDiv   = document.getElementById("productimage");  // das div-Element, durch seine ID gefunden  
var theImage = theDiv.getElementsByTagName("img")[0];    // das Bild: erstes img-Element im div  
theDiv.removeChild(theImage);                            // und hau wech!

War doch gar nicht so kompliziert. Aber es hilft, wenn man versteht, was da genau passiert.

So long,
 Martin

[hawkmaster]

Hallo Martin,

nochmals ganz herzlichen Dank für deine Hilfe und für deine erstklassige Erkärung.

Doch, bestimmt. Mal schön langsam, Schritt für Schritt zum Mitdenken:

var theDiv   = document.getElementById("productimage");  // das div-Element, durch seine ID gefunden

var theImage = theDiv.getElementsByTagName("img")[0];    // das Bild: erstes img-Element im div
theDiv.removeChild(theImage);                            // und hau wech!

>   
> War doch gar nicht so kompliziert. Aber es hilft, wenn man versteht, was da genau passiert.  
  
Ja, so langsam kapier ich das. Mich hat nur die Sache mit dem Index [0] und NodeList durcheinandergebracht.  
  
  
vielen Dank und viele Grüße  
hawk