CODEWITHSUNDEEP
javascriptimage
Steffan Harris
Steffan Harris

Reputation: 9326

How to get the number of the current image clicked on in javascript

Ok, so suppose. I have ten images in documents.images array. When I click on an image. How do I get an alert telling me what image I have clicked on.

EDIT The reason that I want the index of the image I clicked on is because I am trying to bind it to an event and the previous way doesn't seem to work

document.images[i].addEventListener("click", function(){MakeMove(i)}, false);

This statement is in a for loop, and I intended it to bind to every image but that doesn't seem to be working.

Upvotes: 1

Views: 387

Answers (3)

Karl Mendes
Karl Mendes

Reputation: 649

window.onload = function() {
    for (var i = 0; i < document.images.length; i++) {
        var image = document.images[i];
        image.onclick = function() {
            var images = Array.prototype.slice.call(document.images);
            alert(Array.indexOf(images,this));
        }
    };
};

JSFiddle: http://jsfiddle.net/kmendes/8LUzg/1/

If you want it to work on old browsers too add the function under Compatibility on https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf

Upvotes: 0

wheresrhys
wheresrhys

Reputation: 23500

Put this at the bottom of the html file, just before the closing tag

<script type="text/javascript">
function listen(evnt, elem, func) {
    if (elem.addEventListener) { // W3C DOM
        elem.addEventListener(evnt,func,false);
    } else if (elem.attachEvent) { // IE DOM
        var r = elem.attachEvent("on"+evnt, func);
        return r;
    }
}


listen("click", document.getElementsByTagName("body")[0], function(event) {
     var images = document.images,
         clicked = event.target;
    for(var i =0, il = images.length; i<il;i++) {
        if(images[i] === clicked) {
            return alert("You clicked on the " + (i + 1) + "th image");
        }
    }

});
</script>

Upvotes: 0

Shadow Wizard
Shadow Wizard

Reputation: 66388

Here is pure JavaScript way to do that:

window.onload = function() {
    for (var i = 0; i < document.images.length; i++) {
        var image = document.images[i];
        image.setAttribute("index", i + "");
        image.onclick = function() {
            var index = this.getAttribute("index");
            alert("This is image #" + index);
        };
    }
};

The trick is assigning custom attribute with the index, then read that attribute.

Live test case.

Upvotes: 2

Related Questions