title: Javascript get .src from specific image onclick
body: <p>I'm trying to make an image swapper (click smaller image and it changes the image in a larger area of the screen). But I am getting the variable <code>imgSrc</code> as undefined. I believe this is because I am not getting the source for the specific image being clicked.</p>
  
  <pre><code>        var imgSrc = document.getElementsByClassName('avatar-small').src;
          console.log("img Src  = " + imgSrc);
  </code></pre>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;img class="avatar-small" onclick="selectAvatar()" src="images/avatars/1.png"&gt;
  &lt;img class="avatar-small" onclick="selectAvatar()" src="images/avatars/2.png"&gt;
  &lt;img class="avatar-small" onclick="selectAvatar()" src="images/avatars/3.png"&gt;
  </code></pre>
  
  <p>How can I make use of something using <code>.this</code> so I am actually getting the source from the image that is clicked?</p>
  
  <p>The console log outputs:</p>
  
  <pre><code>img Src  = undefined 
  </code></pre>
  
  <p><strong>Solution for anyone looking for a JavaScript image swapper</strong></p>
  
  <p><em>Script:</em></p>
  
  <pre><code>function selectAvatar(this){
      var imgSrc = element.src;
      document.getElementById("avatar-big").src = imgSrc;
  }
  </code></pre>
  
  <p><em>HTML:</em></p>
  
  <pre><code>&lt;img id="avatar-big" src="images/avatars/10.png /&gt;
  
  &lt;img class='avatar-small' onclick='selectAvatar(this)' src='images/avatars/1.png' /&gt;
  &lt;img class='avatar-small' onclick='selectAvatar(this)' src='images/avatars/2.png' /&gt;
  &lt;img class='avatar-small' onclick='selectAvatar(this)' src='images/avatars/3.png' /&gt;
  </code></pre>