Checking Multiple Image Sources- Javascript

Question

I have a table of 4 images that change on click. I was wondering how I could check to see if/when all images in the table are the same image source. I am stuck trying to figure out a way to check all image sources in the table. Any advice is appreciated!

HTML:

<table>
    <tr>
        <td>
            <img id="pos1" src="slicedImg_01.gif" onclick="change(1)" />
            <img id="pos2" src="slicedImg_02.gif" onclick="change(2)" />
        </td>
    <tr>
        <td>
            <img id="pos3" src="slicedImg_03.gif" onclick="change(3)" />
            <img id="pos4" src="slicedImg_04.gif" onclick="change(4)" />
        </td>   
    </tr>       
    </tr>
</table>

JS:

var v = document.getElementById("pos" + clicked_img).src = "slicedImg_0" + rNum + ".gif";



        //var elems = document.getElementsByName.images("f")[0].src;
        //alert(elems);

        if (document.getElementById("pos1").src ==  v){
            if (document.getElementById("pos2").src == v){
                if (document.getElementById("pos3").src == v)

Don't mind my trial and error attempts on the page.

Mike Horen · Answer 1 · 2014-09-14T23:02:02.817

1

Try running this where it makes sense, the src parameter can be removed if the matching src you're looking to check is static.

function checkSameSrc(src){

    return document.querySelector('src=[" + src + "]').length === 4;

}

edited Sep 14 '14 at 23:02

answered Sep 14 '14 at 22:48

Mike Horen

91
2

believe you left something out since `querySelector()` returns DOM elements not integers – charlietfl Sep 14 '14 at 22:51
The matching source will not be static as the images could be any combination of the four. Just checking to see if they all are the same and if so I will have it perform another action. Also trying to use only javascript. Thank you for your suggestion! – swam Sep 14 '14 at 22:57
1

nice catch, needed .length – Mike Horen Sep 14 '14 at 23:01

score 0 · Answer 2 · edited May 23 '17 at 11:57

If jQuery is allowed, a quick Fiddle as example:

var image_array = $("img").map(function () {
  return $(this).attr("src");
});
images = $.unique(image_array);
alert(images.length);

In case images.length is 1, there's only 1 unique image source. When you change one of the image sources in the fiddle to one of the other images and run the fiddle again, the alert will give you 3 instead of 4 etc.
image_array is created using the map()-function, pushing the src of each image into the array. The unique()-function removes all double entries from this array.

References: http://api.jquery.com/jquery.unique/, http://api.jquery.com/jquery.map/

And the same with pure Javascript:

 var elements = document.getElementsByTagName('img');
 var imageArray = new Array();
 for (var i=0; i<elements.length; i++) {
    imageArray[i] = new Image();
    imageArray[i] = elements[i].src;
 }
 function getUnique(element)
 {
  return element.reduce(function(a,b){if(a.indexOf(b)<0)a.push(b);return a;},[]);
 }
 alert(getUnique(imageArray).length);

Fiddle with both versions and one double image: Fiddle

Reference for the nice one-liner used in getUnique(): Remove Duplicates from JavaScript Array, see answer by Christian Landgren.

I very much appreciate the suggestion. I am, however, trying to just use Javascript. — swam, Sep 14 '14 at 22:54
@swam Just added a Javascript version together with the previous jQuery, Fiddle link in updated answer. — matthias_h, Sep 14 '14 at 23:17

Checking Multiple Image Sources- Javascript

2 Answers2