Не могу изменить цвет шрифта

Question

Я хочу щелкнуть нравится / не нравится, чтобы переключать цвета значка с потрясающим шрифтом. Он работает, когда я использую кнопку, но не использую текстовую ссылку. html часть:

<div class='post'>
    <i class='fas fa-heart' id='h2' style='color:red'></i>
    <span>
        <a href='' class='like' bid='2' cid='h2'>like</a>
    </span>
</div>
<br>
<br>
<button>click</button>

Работает javascript:

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";
  }
});

Не работает часть: (Я хочу использовать это, потому что мне нужно добавить вызов AJAX)

<script type="text/javascript">
        $(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";
                }
            });
        });
      </script>

Answer 1

Это сработает, если вы добавите preventDefault() к своей функции click().

    $(document).ready(function() {
      $('.like').click(function(e) {
        e.preventDefault();
        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";
        }
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='post'><i class='fas fa-heart' id='h2' style='color:red'>test</i><span><a href='' class='like' bid='2' cid='h2'>like</a></span></div><br><br><button>click</button>