Why does this event.target.previousElementSibling not work?

so ive got this code

                    <div class="col-lg-12 video-meta">
                    <div class="container">
                        <span class="views"><i class="far fa-eye"></i>{{ Counter::show('post', $post->id) }}</span>

                        <span class="lnd">
                            <a class="like" href="#"><i class="far fa-thumbs-up"></i></a>
                            <a class="like" href="#"><i class="far fa-thumbs-down"></i></a>
                        </span>

and i target it with

        $('.like').on('click', function(event) {
        event.preventDefault();
        var isLike = event.target.previousElementSibling == null;
        console.log(isLike);

and it returns "true" in both cases, why?! is there a reason for this? ive been on it for 4 hours straight now and it worked ONCE , i did change nothing just took a break and then it didnt work after my break? i think this is some kind of bad joke. what am i missing here?

it should basically take the "like" class, and as the first a tag has no previousSiblingElement which is null, it should return true, but the second has an element with the same tag as a sibling and still returns true..

Solution

event.target is the <i> element, because that's the element on which the click really occured.

If you want the <a> (on which you did attach the event handler), you need to request event.currentTarget or even just this:

$('.like').on('click', function(event) {
  event.preventDefault();
  console.log(event.target); // <i>
  
  var isLike = event.currentTarget.previousElementSibling == null;
  console.log(isLike);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 video-meta">
  <div class="container">
    <span class="lnd">
      <a class="like" href="#"><i class="far fa-thumbs-up">a</i></a>
      <a class="like" href="#"><i class="far fa-thumbs-down">b</i></a>
    </span>
  </div>
</div>