title: Can't change font color
body: <p>I want to click like/unlike to toggle colors of an fontawesome icon.
  It works when I use a button but not work using a text link.
  html part:</p>
  
  <pre><code>&lt;div class='post'&gt;
      &lt;i class='fas fa-heart' id='h2' style='color:red'&gt;&lt;/i&gt;
      &lt;span&gt;
          &lt;a href='' class='like' bid='2' cid='h2'&gt;like&lt;/a&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;button&gt;click&lt;/button&gt;
  </code></pre>
  
  <p>Works javascript:</p>
  
  <pre><code>var bac=document.querySelector("button");
  bac.addEventListener("click", function(){
    if (document.getElementById('h2').style.color=="red"){
      document.getElementById('h2').style.color="purple";
    }else if(document.getElementById('h2').style.color=="purple"){
      document.getElementById('h2').style.color="red";
    }
  });
  </code></pre>
  
  <p>Not work part:(I want use this because I need to add an AJAX call)</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $('.like').click(function(){
                  var cid = $(this).attr('cid');
                  if (document.getElementById('h2').style.color=="red"){
                      document.getElementById('h2').style.color="purple";
                  }else if(document.getElementById('h2').style.color=="purple"){
                      document.getElementById('h2').style.color="red";
                  }
              });
          });
        &lt;/script&gt;
  </code></pre>