After I created them, i binded them to an event using the folowing function.
Expand|Select|Wrap|Line Numbers
- function addEvent(target,eventType,eventHandler) {
- if (target.addEventListener) // W3C
- target.addEventListener(eventType,eventHandler,false);
- else if (target.attachEvent) // IE
- target.attachEvent('on'+eventType,eventHandler);
- }
I can't call removeNode() at the start of my function showImage() though.
Creating 4 images with inline onclick methods works well too.
Expand|Select|Wrap|Line Numbers
- <body>
- <div id="myImages"></div>
- <button onclick="removeNode()">removeNode</button>
- <script type="text/javascript">
- var imageBankXhr = XHR();
- imageBankXhr.open('get', 'imagebank.php', false);
- imageBankXhr.send(null);
- var myXmlFeed = imageBankXhr.responseXML;
- var imageBank = myXmlFeed.documentElement.childNodes;
- 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);
- // making the images clickable
- var myImageDivs = document.getElementById('myImages').childNodes;
- for (var i=0; i<myImageDivs.length; i++) {
- addEvent(myImageDivs[i].getElementsByTagName('img')[0], 'click', showImage);
- }
- function showImage(e) {
- var target = e.target || e.srcElement;
- var newDiv = document.createElement('div');
- newDiv.id = 'viewImage';
- var newText = target.caption;
- newDiv.innerText = newText;
- newDiv.textContent = newText;
- document.body.appendChild(newDiv);
- }
- function removeNode() {
- if (document.getElementById('viewImage') !== null) {
- var oldDiv = document.getElementById('viewImage');
- oldDiv.parentNode.removeChild(oldDiv);
- }
- }
- </script>
- </body>
