How to get attribute of div without ID

Question

My website contain lot of images and thats why i cannot give ID for each image it will be tedious task. I need to get the source attribute of image tag but i am not able to do it without ID. I did try for attr() and getAttribute() but it doesn`t seems to work for me.

My Code

<img src="./images/image1.jpg" width='100' height='100' alt='Sample image' onClick='imageInfo(this);'>

<script>
function imageInfo()
{
    alert(this.src);
}
</script>

i am trying to get the source of image tag but it is not coming i have also tried in jsfiddle but it is not working .

JS FIDDLE LINK

You needed to change your options in your fiddle, @hitesh. you had the javascript set to run on onload, when it should have been in the body. http://jsfiddle.net/LgLzh/24/ — ps2goat, Aug 28 '13 at 06:52
what's with all the downvotes? is this you? we are answering your question; if not, you need to clarify what you are asking for by making comments or changing your initial post. — ps2goat, Aug 28 '13 at 06:53
your code is perfect but placed in wrong place just check it out http://jsfiddle.net/LgLzh/32/ — rajesh kakawat, Aug 28 '13 at 06:54
Using `onclick function` in all the img tags is not a good method as you would have nightmare if you were to make a small change. Add a class and then using jquery you can get this to work. — Roy M J, Aug 28 '13 at 07:02
@rajeshkakawat: Thanks ur code works just one question why is it not working wen i put it in java script panel — Hitesh, Aug 28 '13 at 07:45

score 6 · Accepted Answer · edited Aug 28 '13 at 07:24

6

try something like this. Because you have passed the object of image but not used in function

<script>
    function imageInfo(obj)
    {
        alert(obj.src);
    }
</script>

edited Aug 28 '13 at 07:24

Praveen

55,303
33
133
164

answered Aug 28 '13 at 06:50

rajesh kakawat

10,826
1
21
40

Hi it is right answer !!! i like it because of ur jsfiddle example thanks for sharing answer ... http://jsfiddle.net/LgLzh/32/ – Hitesh Aug 28 '13 at 07:46
You can also leave your function as it is and call it using `onclick='imageInfo.call(this)'`. – Amberlamps Sep 03 '13 at 11:33

score 5 · Answer 2 · edited May 23 '17 at 12:16

5

From your fiddle,

function imageInfo(this)
{
    alert('image');
    alert(this.src);
}

This happened because of this is a reserved keyword.

 function imageInfo (e)
{
    alert('image');
    alert(e.src);
}

Also onclick not onClick, to know the reason check this SO answer

check this Fiddle

edited May 23 '17 at 12:16

Community

1
1

answered Aug 28 '13 at 06:52

Praveen

55,303
33
133
164

score 3 · Answer 3 · answered Aug 28 '13 at 06:53

3

You can always do this:

HTML

<img src="https://www.google.ca/images/srpr/logo4w.png" width='100' height='100' alt="Sample image">

JavaScript

$('img').click(function() {
    window.alert($(this).attr('src'));
});

http://jsfiddle.net/QB6Da/

answered Aug 28 '13 at 06:53

Sadiq

2,249
2
24
32

so instead of using onclick i can directly go for jquery click event ...hmmm good idea !!! ... – Hitesh Aug 28 '13 at 08:00

score 2 · Answer 4 · answered Aug 28 '13 at 06:49

2

To just fix your code, you need to pass the control to the javascript function:

<img src="./images/image1.jpg" width='100' height='100' alt='Sample image' onClick='imageInfo(this);'>

<script>
function imageInfo(control)
{
    alert(control.src);
}
</script>

answered Aug 28 '13 at 06:49

ps2goat

8,067
1
35
68

1

whoever is downvoting this needs to provide a comment. this fixes his issue as he requested, and I even provided a jsfiddle. http://jsfiddle.net/LgLzh/24/ You guys suck. – ps2goat Aug 28 '13 at 06:54
what do you mean by passing `control`? Is that a keyword? – Praveen Aug 28 '13 at 07:00
1

no, that's the name of your parameter. onclick passes the control (this) as a parameter to the imageInfo function. Inside imageInfo, your control will now be accessed by the variable name control. You can set that to whatever you want; I use variable and parameter names that make sense. 'imgControl' could also work. Whatever is relevant to you and your app. – ps2goat Aug 28 '13 at 07:02
This answer is correct. "control" is just a parameter, you can't use "this" as a function parameter, that's why it wasn't working. Also, make sure that you use some kind of htaccess to disallow crawling of images as search engines will not index you if they have to consume resources when they crawl each img... – George Violaris Aug 28 '13 at 07:09
I know it is a parameter, but you're missing to explain that in your answer. That's why I pointed in comments. Hope you understand :) – Praveen Aug 28 '13 at 07:16
If I had to explain everything about everything in my comments, I'd be here all day. – ps2goat Aug 28 '13 at 07:27

score 2 · Answer 5 · answered Aug 28 '13 at 06:49

2

In your example you have to put the clicked Object as a parameter for the function:

function imageInfo(img)
{
    alert(img.src);
}

answered Aug 28 '13 at 06:49

Mihai Matei

24,166
5
32
50

score 1 · Answer 6 · answered Aug 28 '13 at 06:50

Since you tagged this as jQuery, this should work :

http://jsfiddle.net/LgLzh/20/

$(function() {
    $('img').each(function() {
        console.log($(this).attr('src')); 
    });
});

Or this if you wanna react when it gets clicked : http://jsfiddle.net/LgLzh/26/

$(function() {
    $('img').on('click', function() {
        console.log($(this).attr('src')); 
    });
});

S. S. Rawat · Answer 7 · 2013-08-28T07:09:57.273

1

Try this. This will be help for you

  $('img').click(function() {
        alert(this.src); 
});

Demo Here

edited Aug 28 '13 at 07:09

answered Aug 28 '13 at 06:56

S. S. Rawat

5,943
4
43
59

Fiddle isn't enough. When attaching a fiddle it would have shown a message **"please add your code here"**. This is not nice, a good reason will be a better one. – Praveen Aug 28 '13 at 07:03
@Subhash : i have to agree your code is jquery and much simpler than OneOfOne ...thanks – Hitesh Aug 28 '13 at 08:06
i cannot accept ur answer because if i have 500 images and out of 500 if i want to use only 100 than i need to add class and do this. Anyways i have given upvote for this one and i still feel that @rajesh answer is what i need ...thanks – Hitesh Aug 28 '13 at 10:18

score 1 · Answer 8 · answered Aug 28 '13 at 06:57

1

This will get you the src of each image clicked on the page. You do however need jQuery for this to work.

$('img').on('click', function (event) {
    console.log(event.target.src);
});

http://jsfiddle.net/LgLzh/42/

answered Aug 28 '13 at 06:57

Rob Schmuecker

8,934
2
18
34

score 1 · Answer 9 · answered Aug 28 '13 at 06:58

1

Try this

 $('img').on('click',function(){
            alert($(this).attr('src'));
        });

answered Aug 28 '13 at 06:58

rajmohan

1,618
1
15
36

score 1 · Answer 10 · answered Aug 28 '13 at 06:59

Using onclick function in all the img tags is not a good method as you would have nightmare if you were to make a small change. Add a class and then using jquery you can get this to work. See the following.

Using class attribute :

<img src="http://4.bp.blogspot.com/-uyvTMZ3dFPs/UKHsc_ZbysI/AAAAAAAACvo/QdVAlVBbUxE/s320/1hello.jpg" class="image"/><br>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" class="image" /><br>
<img src="http://www.find-a-job-online.org/images/picture.gif" class="image"/>

Script :

$(".image").click(function(){
   var src = $(this).attr('src');
   alert("SRC = " + src);
});

Fiddle : http://jsfiddle.net/yL5cf/6/

score 1 · Answer 11 · answered Aug 28 '13 at 07:38

<img src="http://4.bp.blogspot.com/-uyvTMZ3dFPs/UKHsc_ZbysI/AAAAAAAACvo/QdVAlVBbUxE/s320/1hello.jpg" width='400' height='400' alt='Sample_image' class="img">

other answers are short and correct, but incase you want to use jQuery...

$(document).ready(function(){
    function imageInfo(img)
        {
            var src = $(img).attr("src");
            alert(src);
        };
    $(".img").click(function(){
        imageInfo(this);
    });
});

and also, "this" is a reserved keyword.

score 0 · Answer 12 · answered Aug 28 '13 at 06:53

0

http://jsfiddle.net/LgLzh/25/

Due to several reasons, you should define the function to the window area.

window.imageInfo = function (source) {
    alert('image');
    alert(source);
}

answered Aug 28 '13 at 06:53

may i know what are those reasons – Hitesh Aug 28 '13 at 07:59

score 0 · Answer 13 · answered Aug 28 '13 at 07:00

0

Try this

<img src="http://4.bp.blogspot.com/-uyvTMZ3dFPs/UKHsc_ZbysI/AAAAAAAACvo/QdVAlVBbUxE/s320/1hello.jpg" width='400' height='400' alt='Sample_image'>

$(document).ready(function(){
    $('img').click(function(e){        
        alert($(this).attr('src'));
    });
});

don't forget to include jquery to run this. Here's the fiddle http://jsfiddle.net/LgLzh/44/

answered Aug 28 '13 at 07:00

Surender

757
5
12

1

Seriously we don't need jQuery everywhere, vanilla is good for simple things. – George Violaris Aug 28 '13 at 07:10
You can use your favorite one. Just that, my code works with jquery. – Surender Aug 28 '13 at 07:23

score 0 · Answer 14 · answered Aug 28 '13 at 07:13

0

This is what you can do...

$('img').bind('click',function(){ console.log($(this).attr('src')); });

answered Aug 28 '13 at 07:13

Habibur Rahman

617
3
7
11

why do i have to bind it ?? – Hitesh Aug 28 '13 at 08:14

score -1 · Answer 15 · answered Aug 28 '13 at 06:51

-1

check the following Js fiddle

http://jsfiddle.net/LgLzh/22/

$('img').filter(function(){
        alert($(this).attr('src'));
    });

Is this what you want..if not can you be more specific?

answered Aug 28 '13 at 06:51

Arun Bertil

4,598
4
33
59

2

You should alert this on click event of image – S. S. Rawat Aug 28 '13 at 06:59

How to get attribute of div without ID

15 Answers15