Javascript loop through images attributes

Question

I have a div on my website which contains a number of images. I'm trying to get the onclick attribute of each of the images inside said div.

<div class="hoi">
    <img src="" onclick="alert('hoi')"/>
    <img src="" onclick="alert('hoi')"/>
</div>

I've tried the following Javascript code:

var count = $(".hoi img").length;

for(var i = 0; i <= count; i++){
    alert($('.hoi').find('img').getAttribute('onclick'));
}

But I get the following error Uncaught TypeError: undefined is not a function

Use find('img').attr('onclick') or find('img')[0].getAttribute('onclick') — vp_arth
– vp_arth, Commented Dec 2, 2014 at 13:32

Arun P Johny · Accepted Answer · 2014-11-13 09:41:02Z

2

There is no method called getAttribute() in jQuery object, you have .attr(). getAttribute() is a dom api method.

$('.hoi img').each(function(){
    console.log($(this).attr('onclick'))
})

Also to iterate through a set of elements you can use .each().

answered Nov 13, 2014 at 9:41

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

sasi · Accepted Answer · 2014-11-13 10:22:59Z

0

onclick is a event you can't use it as a data-attribute.use some other.
Here is the working code:

$('.hoi img').each(function(){
$(this).on('click',function(){
    alert($(this).attr('data-onclick'));
})
})

I have change onclick to data-onclick and removed alert('hoi') and placed image_1 and image_2 for understanding

answered Nov 13, 2014 at 10:22

sasi

2091 silver badge7 bronze badges