How to get the attribute (e.g., title) of an element when clicked on, with Javascript (not jQuery)?
<p>I'm exploring some sample code from a book.  The code has a set of thumbnails like this:</p>

<pre><code>&lt;div id="thumbnailPane"&gt;
  &lt;img src="images/itemGuitar.jpg" alt="guitar" width="301" height="105" 
       title="itemGuitar" id="itemGuitar" /&gt;
  &lt;img src="images/itemShades.jpg" alt="sunglasses" width="301" height="88" 
       title="itemShades" id="itemShades" /&gt;
  &lt;img src="images/itemCowbell.jpg" alt="cowbell" width="301" height="126" 
       title="itemCowbell" id="itemCowbell" /&gt;
  &lt;img src="images/itemHat.jpg" alt="hat" width="300" height="152" 
       title="itemHat" id="itemHat" /&gt;
&lt;/div&gt;
</code></pre>

<p>When a thumbnail is clicked, it brings out a larger image with this function:</p>

<pre><code>function initPage() {
  // find the thumbnails on the page
  thumbs = document.getElementById("thumbnailPane").getElementsByTagName("img");
  // set the handler for each image
  for (var i = 1; i &lt; thumbs.length; i++) {//CHANGED FROM 0 TO 1
    image = thumbs[i];

    // create the onclick function
    image.onclick = function() {
      // find the image name
      detailURL = 'images/' + this.title + '-detail.jpg';
      document.getElementById("itemDetail").src = detailURL;
      getDetails(this.title);
    }
  }
}
</code></pre>

<p>I understand how that works.  What I am wondering is whether it would be possible to replicate that with a single hard coded function.  Basically what I'd like is to get the title of a thumbnail when it is clicked with a single common function for all thumbnails that would be called with an <code>onclick</code> event handler (<code>onclick="getImage()"</code>).</p>

<p>How do I get the <code>title</code> or the <code>id</code> of the element that was just clicked?</p>

<p>I do not use jQuery, so I need a JS answer please.</p>

<p>EDIT:</p>

<p>I have tried to write a <code>getImage()</code> function like this:</p>

<pre><code>function getImage(){
  var title = this.title;
  detailURL='images/' + title + '-detail.jpg';
  document.getElementById("itemDetail").src = detailURL;
}
</code></pre>

<p>This doesn't work.  The value of <code>var title</code> is <code>"undefined"</code>.</p>
