CODEWITHSUNDEEP
javascripthtmladdeventlistenerappendchildgetelementsbytagname
bjorn
bjorn

Reputation: 19

javascript thumbnail gallery click to enlarge using addEventListener, remove/appendChild

I want to use addEventListener to thumbnail images, so that by clicking them one at a time, they show up in separate div as a large-size image (image sizing is css not relevant to my problem therefore not shown here). I can't pinpoint my problem here.

var imgs = document.getElementById("thumbnails").getElementsByTagName("img");
var mainpic = document.getElementById("mainpic");
for (var x in imgs) {
	imgs[x].addEventListener('click', function(){
		mainpic.innerHTML = '';
		var dupenode = imgs[x].cloneNode();
		mainpic.appendChild(dupenode);
	}, false);
};
<div id="thumbnails">
    <img src="im1.jpg" />
    <img src="im2.jpg" />
    <img src="im3.jpg" />
</div>

<div id="mainpic">
</div>

Upvotes: 1

Views: 592

Answers (0)

Related Questions