Calling AddEventListener in a loop with a variable element name
- by user302209
Hi, I'm trying to do the following:
I have a set of images and select (dropdown) HTML elements, 30 of each one. I'm trying to use AddEventListener on a loop from 1 to 30 so that when I change the value of the select, the image src is updated (and the image changes).
The AddEventListener function is this one:
function AddEventListener(element, eventType, handler, capture)
{
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
}
I tried this and it worked:
var urlfolderanimalimages = "http://localhost/animalimages/";
var testselect = "sel15";
var testimg = "i15";
AddEventListener(document.getElementById(testselect), "change", function(e) {
document.getElementById(testimg).src = urlfolderanimalimages + document.getElementById(testselect).value;
document.getElementById(testimg).style.display = 'inline';
if (e.preventDefault) e.preventDefault();
else e.returnResult = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}, false);
But then I tried to call it in a loop and it doesn't work. The event is added, but when I change any select, it will update the last one (the image with id i30).
var urlfolderanimalimages = "http://localhost/animalimages/";
for (k=1;k<=30;k++) {
var idselect = "sel" + k;
var idimage = "i" + k;
AddEventListener(document.getElementById(idselect), "change", function(e) {
document.getElementById(idimage).src = urlfolderanimalimages + document.getElementById(idselect).value;
document.getElementById(idimage).style.display = 'inline';
if (e.preventDefault) e.preventDefault();
else e.returnResult = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}, false);
}
What am I doing wrong? I'm new to JavaScript (and programming in general), so sorry for the vomit-inducing code :(
