CODEWITHSUNDEEP
javascriptjquery
Hitesh
Hitesh

Reputation: 4298

How to get attribute of div without ID

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

Upvotes: 4

Views: 1761

Answers (15)

Praveen
Praveen

Reputation: 56519

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

Upvotes: 5

Thakur Saksham Chauhan
Thakur Saksham Chauhan

Reputation: 186

<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.

Upvotes: 1

rajesh kakawat
rajesh kakawat

Reputation: 10906

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>

Upvotes: 6

Habibur Rahman
Habibur Rahman

Reputation: 633

This is what you can do...

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

Upvotes: 0

S. S. Rawat
S. S. Rawat

Reputation: 6121

Try this. This will be help for you

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

Demo Here

Upvotes: 1

Surender
Surender

Reputation: 757

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/

Upvotes: 0

Roy M J
Roy M J

Reputation: 6938

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/

Upvotes: 1

rajmohan
rajmohan

Reputation: 1618

Try this

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

Upvotes: 1

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

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/

Upvotes: 1

Sadiq
Sadiq

Reputation: 2289

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/

Upvotes: 3

user1345990
user1345990

Reputation:

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);
}

Upvotes: 0

Arun Bertil
Arun Bertil

Reputation: 4648

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?

Upvotes: -1

OneOfOne
OneOfOne

Reputation: 99351

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')); 
    });
});

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

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

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

Upvotes: 2

ps2goat
ps2goat

Reputation: 8485

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>

Upvotes: 2

Related Questions