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

Answer 1

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>