grabbing an image from an array with specific src attribute

Question

i am new to js. i am trying to grab a image from an array with similar class names which has a specific src saved in a variable bigImgPath

here is my Updated Code..

  var moniqueThumbs=document.getElementsByClassName('moniqueThumbs'); // Grab the ThumbNails
var bigImagesList=document.getElementsByClassName('monique-image');  // Grabs All Big Images

var currentBigImg='';

var currentBigImageFilePath="";  // Current Big Image path Captured by current Thumb Click //s
for(var i = 0; i <  moniqueThumbs.length; i++){
     moniqueThumbs[i].addEventListener("click", grabBigImgPath); // Added a myFunction Click event to Thumbs
    }




        // Grab Big Image Path from Clicked Thumb
        function grabBigImgPath() 
        {
    currentBigImageFilePath=this.getAttribute('data-bigImgPath'); // grabs the current bigPath from the thumb//

    var currentBigImageToDisplay;
    for (var i = 0; i < bigImagesList.length; i++)
    {
        if (bigImagesList[i].getAttribute('src') == currentBigImageFilePath)
        {
            currentBigImageToDisplay = bigImagesList[i];
            console.log(currentBigImageToDisplay);

            break;
        }
    }


}

Still not displaying the current image in console.log

var bigImagesList=document.getElementsByClassName('monique-image'); // Grabs All Big Images — Cloudboy22
– Cloudboy22, Commented Aug 21, 2015 at 13:06

James Brierley · Accepted Answer · 2015-08-21 13:34:10Z

1

You need to use the getAttribute method to get the src:

currentBigImageToDisplay = bigImagesList[i].getAttribute('src') == bigImgPath;

That's still not right however, as it will just return true or false, so you want something like:

var currentBigImageToDisplay;
for (var i = 0; i < bigImagesList.length; i++) {
    if (bigImagesList[i].getAttribute('src') == bigImgPath) {
        currentBigImageToDisplay = bigImagesList[i];
        break;
    }
}

Alternatively, you could use the filter syntax:

bigImagesList = Array.prototype.slice.call(bigImagesList);
var currentBigImageToDisplay = bigImagesList.filter(function(item) {
    return item.getAttribute('src') == bigImgPath;
})[0]

Working JSFIddle

edited Aug 21, 2015 at 13:34

answered Aug 21, 2015 at 13:17

James Brierley

4,6801 gold badge22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Cloudboy22 Over a year ago

it says Uncaught ReferenceError: bigImageList is not defined

James Brierley Over a year ago

@MarcAndreJiacarrini Typo, should be fixed.

Cloudboy22 Over a year ago

ok now i added console.log(currentBigImageToDisplay); but nothing is shown in console... :(

jonny Over a year ago

@JamesBrierley iterating over a NodeList with filter is not possible. You have to convert the object to an Array first.

James Brierley Over a year ago

@MarcAndreJiacarrini I've added a working JSFiddle example

|

Collectives™ on Stack Overflow

grabbing an image from an array with specific src attribute

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related