retrieve getAttribute of clicked element in javascript

Question

i have number of images on my webpage.

<img id="a" src="1.jpg">
<br>
<img  id="b" src="2.jpg">

I am trying to get "src" of clicked images by using below javascript.

var getImageName = function(){
     document.onclick = function(){
        var image = this.getAttribute("src");
        alert(image);
        }}

getImageName();

But its giving an error this.getAttribute is not function.

Any idea? Thanks in advance

Arun P Johny · Accepted Answer · 2015-07-13 10:40:50Z

11

Because this is the document object in your click handler, so you may want to check whether the click has happened in an image element

var getImageName = function() {
  document.onclick = function(e) {
    if (e.target.tagName == 'IMG') {
      var image = e.target.getAttribute("src");
      alert(image);
    }
  }
}

getImageName()

<img id="a" src="//placehold.it/64X64&text=1" />
<br>
<img id="a" src="//placehold.it/64X64&text=2" />
<br>

edited Jul 13, 2015 at 10:40

answered Jul 13, 2015 at 10:31

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

4 Comments

Nomad Over a year ago

can you please elaborate how this and target are different?

Arun P Johny Over a year ago

@Nomad since you have binded the handler to the document object, this inside the hadnler will refer to the document object

Arun P Johny Over a year ago

@Nomad Event.target will refer to the element which dispatched the event so it will be the image element

Arun P Johny Over a year ago

@Nomad see the Event object properties for details

Collectives™ on Stack Overflow

retrieve getAttribute of clicked element in javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related