title: Output Element ID to Console
body: <p>I'd like to output the ID of an element when clicked to the browser console, however I can't work out how to do so in string format - currently the output is blank. </p>
  
  <p>The HTML:   </p>
  
  <pre><code>&lt;div id = "1" class = "column"&gt;
      &lt;a href="javascript:;" onclick="addClassToImage(this)"&gt; &lt;img class="img-class" src="https://manilva.club/wp-content/uploads/2019/04/By-Product.png" alt="By Product" /&gt;&lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The JavaScript:</p>
  
  <pre><code>function addClassToImage(element) 
    {
      var innerImage = element.querySelector('img');
      var id  = element.id;
      if(innerImage) 
      {
        if(innerImage.classList.contains('clicked')) 
        {
          innerImage.classList.remove('clicked');
        }
        else 
        {
          innerImage.classList.add('clicked');
          console.log(id);
        }
      }
  }
  </code></pre>