title: How to get Image source path on onclick event of that Image clicked
body: <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>