How to compare event and HTML tag in Javascript

Question

I'm trying to compare these codes to boolean value.

HTML

<a href="#" id="like">
    <i class="fa fa-thumbs-o-up fa-fw"></i>
</a>

jQuery

$('#like').on('click', function(event) {

    ...

    var htmlTag = '<i class="fa fa-thumbs-o-up fa-fw"></i>';
    var isLike = event.target.closest('#like').innerHTML == htmlTag;

    if (isLike) {
        console.log('true');
    } else {
        console.log('false');
    }

    ...

});

But it's going to false, In fact it should be true. Why? Thanks for every answers.

The id attribute of an element should be unique for the whole page. This might be contributing to your woes. Also why the check at all? You could change the markup to target the i element or use a more specific selector to target it $('.like i') — user2033671
– user2033671, Commented Jun 2, 2017 at 12:49

Renzo Calla · Accepted Answer · 2017-06-02 12:54:45Z

2

The problem is that the innerHtml is returning a string with extra spaces use trim() in order to fix it

var isLike = event.target.closest('#like').innerHTML.trim() == htmlTag;

$('#like').on('click', function(event) {
    console.log(event.target);
    var htmlTag = '<i class="fa fa-thumbs-o-up fa-fw"></i>';
    var isLike = event.target.closest('#like').innerHTML.trim() == htmlTag;


    if (isLike) {
        console.log('true');
    } else {
        console.log('false');
    }

});

#like{
height:50px;
width:50px;
border:1px solid;
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="like">
    <i class="fa fa-thumbs-o-up fa-fw"></i>
</a>

answered Jun 2, 2017 at 12:54

Renzo Calla

7,7362 gold badges25 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ntkckrt Over a year ago

my question it solved. But your answer also great! I'm unexpected to use .trim() Thanks for your answer!

Mihai Alexandru-Ionut · Accepted Answer · 2017-06-02 12:48:13Z

1

You should use .html() method in order to return the html of hyperlink.

$('#like').on('click', function(event) {
    var htmlTag = 'Like<i class="fa fa-thumbs-o-up fa-fw"></i>';
    var isLike = $(this).html().trim() == htmlTag;
    if (isLike) {
        console.log('true');
    } else {
        console.log('false');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a  id="like">
  Like<i class="fa fa-thumbs-o-up fa-fw"></i>
</a>

answered Jun 2, 2017 at 12:48

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Comments

Ali Hesari · Accepted Answer · 2017-06-02 12:54:07Z

1

Try this:

$('button').on('click', function(event) {
    var htmlTag = '<i class="fa fa-thumbs-o-up fa-fw"></i>';
    var isLike = $('#like').html();
    if (htmlTag.trim() === isLike.trim()) {
        console.log('true');
    } else {
        console.log('false');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Test
</button>

<a href="#" id="like">
    <i class="fa fa-thumbs-o-up fa-fw"></i>
</a>

answered Jun 2, 2017 at 12:54

Ali Hesari

1,9595 gold badges28 silver badges56 bronze badges

1 Comment

ntkckrt Over a year ago

my question it solved. But your answer also great! I'm unexpected to use .trim() Thanks for your answer!

vijayP · Accepted Answer · 2017-06-02 12:55:33Z

1

event.target.closest('#like').innerHTML returns you the html in the string format but its with white spaces appended to it. You can use $.trim() to remove these white spaces before string comparision.

$(document).ready(function() {
  $('#like').on('click', function(event) {

    var htmlTag = '<i class="fa fa-thumbs-o-up fa-fw">Hi</i>';
    alert("#" + event.target.closest('#like').innerHTML + "#");
    var isLike = $.trim(event.target.closest('#like').innerHTML) == htmlTag;

    if (isLike) {
      alert('true');
    } else {
      alert('false');
    }


  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#" id="like">
  <i class="fa fa-thumbs-o-up fa-fw">Hi</i>
</a>

answered Jun 2, 2017 at 12:55

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

1 Comment

ntkckrt Over a year ago

Yep! My question it solved. But your answer also great! I'm unexpected to use $.trim(...) Thanks for your answer!

Collectives™ on Stack Overflow

How to compare event and HTML tag in Javascript

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related