I would like to access all the images from a particular div like

<div id="mydiv">
 <div id="mydiv1">
  <img  src="pic.jpg">
  <img  src="pic.jpg">
  <img  src="">`enter code here`
 </div>
 <div id="mydiv2">
  <img href="#">
  <img  src="pic.jpg">
  <img  src="">
 </div>
</div>

Its a dynamic page what i need to do is to get all images's src from this div and check which image has no image link in its src and according to this display the alert

Im new to java script please help me out.

I would like to access all the images from a particular div like

<div id="mydiv">
 <div id="mydiv1">
  <img  src="pic.jpg">
  <img  src="pic.jpg">
  <img  src="">`enter code here`
 </div>
 <div id="mydiv2">
  <img href="#">
  <img  src="pic.jpg">
  <img  src="">
 </div>
</div>

Its a dynamic page what i need to do is to get all images's src from this div and check which image has no image link in its src and according to this display the alert

Im new to java script please help me out.

• javascript
• image
• html
• src

• 1 <img> tag should not have "href" attribute! – Dziad Borowy Commented Dec 6, 2012 at 10:14
• @tborychowski It didn't originally have them, but an answer here suggested it for some reason, which is why I think the OP edited it in. – user1726343 Commented Dec 6, 2012 at 10:20
• It's being unclear to me what you actually want. I thought you wanted an alert for each image without a src, but below you have a ment that makes it sound like you want the count? Could you please clarify? – AmericanUmlaut Commented Dec 6, 2012 at 10:22
• first i need to count the image actually its for a dynamic wensite.if count is less than 12 then i need to give an alert – user1881845 Commented Dec 6, 2012 at 10:24
• You should update the question to indicate that. I'll update my answer. -- And you're absolutely certain you want to alert if the number of images without a source is less than 12? That just seems kind of strange. – AmericanUmlaut Commented Dec 6, 2012 at 10:25

5 Answers 5

var imgs = document.getElementById('mydiv').getElementsByTagName('img');
var countImagesWithoutSrc = 0;

var curImg;
for(var i = 0; i < imgs .length; i++) {
  curImg = imgs[i];

  if(!curImg.src || !curImg.src.length) {
    ++countImagesWithoutSrc;
  }
}

alert(countImagesWithoutSrc); //gives you the number of images missing a src attribute

var images = document.getElementById('mydiv').getElementsByTagName('img');
var emptyimg = [];
for(var i = 0; i < images.length; i++){
    if(images[i].src=="")
        emptyimg.push(images[i]);
}

To quote your ment:

yes i need to count of blank src images

To find the number of images with empty src attributes:

var count = 0
for(var i = 0; i < images.length; i++){
    if(images[i].src)
        count++;
}

First add jQuery library and write down following code to find out images count.

var imageCount = 0;
$(document).ready(function(){
   $('div').children('img').each(function(index,item){
       if($(this).attr('src') == "" || $(this).attr('src') == undefined)
       {
           count++;
       }
   });
   alert(count);
});

if you are using only javascript then please use below code:-

 for(j=0;j < document.getElementsByTagName('img').length;j++)
                {
                    if(document.getElementsByTagName('img')[j].getAttribute('src') == "")
                    {
                        count++
                    }

                }

Please check and let me know if this is not working out or if you want something other than this.

Regards Durgaprasad

Get to know jQuery at first where you can use something like this:

$('img').each(function(index) {
    alert(index + ': ' + $(this).text());
});

your html code is not very clear you can't have img with html files as source unless they are jpeg files with html extension

<img src="somepage.html">

if you want to link them you need and anchor tag
it's
<a href="somepage.html" ><img src="picsrc.jpg"></a>
maybe it's cause of that