why doesn't this function (showImage() ) work as soon as the div got content?

[Dick Brouwers]

<body>
<div id="myImages"></div>
<! THIS IS THE DIV MY CONTENT NEEDS TO GO IN-->
<div id="viewImage"></div>

<script type="text/javascript">
//ajaxrequest
var imageBankXhr = XHR();

imageBankXhr.open('get', 'imagebank.php', false);
imageBankXhr.send(null);

var myXmlFeed = imageBankXhr.responseXML;
var imageBank = myXmlFeed.documentElement.childNodes;

// here i get the images and properties from an external xml
var aFragment = document.createDocumentFragment();
for (var i=0; i<imageBank.length; i++) {
	var newDiv = document.createElement('div');
	newDiv.className = 'myImage';
	var newImage = document.createElement('img');
	newImage.src = imageBank[i].childNodes[0].childNodes[0].nodeValue;
	newImage.imageid = imageBank[i].attributes[0].nodeValue;
	newImage.caption = imageBank[i].childNodes[1].childNodes[0].nodeValue;
	newDiv.appendChild(newImage);
	aFragment.appendChild(newDiv);
}
document.getElementById('myImages').appendChild(aFragment);

// ADD EVENT REFERS TO ATTACHEVENT / ADDEVENTLISTENER
var myImageDivs = document.getElementById('myImages').childNodes;
for (var i=0; i<myImageDivs.length; i++) {
	addEvent(myImageDivs[i].getElementsByTagName('img')[0], 'click', showImage);
}

/*
THIS FUNCTION WORKS FINE WHEN I ALERT THE RESULT, IT ONLY 
WORKS ONE TIME, WHEN I USE INNERHTML OR TEXTCONTENT OR 
INNERTEXT... AS SOON AS THE DIV HAS CONTENT IT DOESNT WORK 
ANYMORE (only tested it in ff and safari)
*/
function showImage(e) {
	
	target = e.target || e.srcElement;
	document.getElementById('viewImage').innerHTML = target.caption;
	
}
</script>
</body>

[kidwon]

Try with embedding jquery library and put the part of the code that doesn't work soon enough in $("document").r eady()

<script type="text/javascript" src="path to jquery file"></script>

$("document").ready( function() { .....your problematic code....});

It loads the content before the DOM is loaded.
You can right it your own but no need when someone have written it already.
You can find the library at http://www.jquery.com
If any problems feel free to ask again and sign up thus you'll post quickly without moderation!

[kidwon]

Oops now when reading it closely I see that your problem might be a quite different matter...
It's really hard for me to look in other people code but you say that it stops working after content is added to the div. Try removing the content on every iteration but still I'm guessing what's really the problem

[Dick Brouwers]

Thanks for your reply kidwon. I rewrote the code to this: now it works perfectly, when addNode() is fired, it creates a new div with the content. If there is already a div present in the dom with id: hallo, removeNode() removes it first before a new one is added.

It is the same code, same eventlisteners. .. So the problem probably exists in the way my clickable images were created (from an external xml file). Or maybe in the for loop that i used to bind them to the click event.

<body>
<div id='klik'></div>
<div id='klik2'></div>

<script type="text/javascript">

var newImage = document.createElement('img');
newImage.src = 'images/button.png';
newImage.caption = 'this is an image';

var klikme = document.getElementById('klik');
klikme.appendChild(newImage);

var newImage = document.createElement('img');
newImage.src = 'images/button.png';
newImage.caption = 'this is an image too';

var klikme = document.getElementById('klik2');
klikme.appendChild(newImage);


addEvent(document.getElementById('klik').childNodes[0], 'click', addNode);
addEvent(document.getElementById('klik2').childNodes[0], 'click', addNode);

function addNode(e) {

// remove oldNode first
	removeNode();

	var newDiv = document.createElement('div');
	var newText = this.caption;

	newDiv.id = 'hallo';
	newDiv.innerText = newText;
	newDiv.textContent = newText;
	document.body.appendChild(newDiv);
}

function removeNode() {
	if (document.getElementById('hallo') != null) {
		var oldDiv = document.getElementById('hallo');
		oldDiv.parentNode.removeChild(oldDiv);
	}
}

</script>