How to get Image source path on onclick event of that Image clicked
<p>I need to get the Image source when onclick event of the image is fired .</p>

<p>I tried using document.getElementById("example").src; , but the console on browser says </p>

<p><strong>Uncaught TypeError: Cannot read property 'src' of null</strong></p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
function changeIt()
{
var name = document.getElementById("myimage").src;
alert(name);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img onclick="changeIt()" src='em1.gif' name='example' border='0' /&gt;
&lt;img onclick="changeIt()" src='em2.gif' name='example' border='0' /&gt;
&lt;img onclick="changeIt()" src='em3.gif' name='example' border='0' /&gt;
&lt;img onclick="changeIt()" src='em4.gif' name='example' border='0' /&gt;
&lt;img onclick="changeIt()" src='em5.gif' name='example' border='0' /&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>Update part .</strong></p>

<p>The actual source is , on a AJAX Response , i will get Image Paths from a folder , for which i need to create Images dynamically and add them to a div .</p>

<p>This is actual code </p>

<pre><code>outputdata.forEach(function (element) {
                   content = $("&lt;div&gt;&lt;a href='something'&gt;&lt;img onclick='changeIt()' src='" + element + "'   /&gt;&lt;/a&gt;&lt;/div&gt;");
                   content.addClass('content');
                   container.append(content);
                   $("#fp_thumbScroller").append(container);
                });
            }
</code></pre>

<p>so i didn't created ID , thinking as it is not suitable to have same id's for different images .</p>
