title: Adding event listener to FontAwesome icons
body: <p>I'm currently trying to make a media player that is OOP. A requirement is that I make custom media player buttons, and not use the ones inherent within the audio object. I've pulled icons from Font Awesome, and am having trouble giving them eventlisteners. </p>
  
  <p>I put the icons into a span class called clickable</p>
  
  <pre><code>&lt;span class="clickable"&gt;
  &lt;span class="fa fa-backward fa-4x fa-fw" aria-hidden="true" id="Back"&gt;&lt;/span&gt;
  &lt;span class="fa fa-pause fa-4x fa-fw" aria-hidden="true" id="Pause"&gt;&lt;/span&gt;
  &lt;span class="fa fa-play fa-4x fa-fw" aria-hidden="true" id="Play"&gt;&lt;/span&gt;
  &lt;span class="fa fa-forward fa-4x fa-fw" aria-hidden="true" id="Forward"&gt;&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Then in the CSS I made the #clickable class clickable</p>
  
  <pre><code>  #clickable {
    cursor:pointer;
    }
  </code></pre>
  
  <p>Then in the JS added an eventListener that does not detect anything.Right now I'm just having it log hello to see if the function executes, but ultimately I want to call an object method.</p>
  
  <pre><code>document.getElementById('Back').addEventListener("click", 
  function(e){
    e.preventDefault
    console.log(hello);
    // myPlaylist.play();
  })
  </code></pre>