Jquery html() inside conditional check

by

these are extract of my code

<button>Hook It!</button>

and a bit of JQuery

$("ul li .tag_detail button").on('click', function() {
    console.log($(this).html());
    if ($(this).html() == 'Hook It!') {
        $(this).html('Unhook!');
    }
    if ($(this).html() == 'Unhook!') {
        $(this).html('Hook It!');
    }
});

Now, as you can see i want a toggling effect, i.e. when i click on button it should toggle between Hook It! and Unhook!.

The problem lies here

if($(this).html() == 'Hook It!')

here this condition never passes while console log prints Hook It!

console.log($(this).html());

14 thoughts on “Jquery html() inside conditional check”

  1. The problem is the first if condition is satisfied then the content is change to Unhook, then the second one is satisfied because the content is changed by the first condition now the second block executes change the html back to Hook It

    $("ul li .tag_detail button").on('click', function () {
    var text = $(this).text();
    console.log(text);
    if (text == 'Hook It!') {
        $(this).html('Unhook!');
    } else if (text == 'Unhook!') {
        $(this).html('Hook It!');
    }
});

    another version could be

    $("ul li .tag_detail button").on('click', function () {
    $(this).text(function(idx, text){
        return text == 'Hook It!' ? 'Unhook!' : 'Hook It!';
    });
});
    Reply

  2. The answer is your button is set to unhook! before you check unhook! and changed it to hook it! cause you used two if instead of if else so…

    Please see the fixed code

    $("ul li .tag_detail button").on('click', function() {
    if ($(this).html() == 'Hook It!') {
        $(this).html('Unhook!');
    }
    // change it to else if
    else if ($(this).html() == 'Unhook!') {
        $(this).html('Hook It!');
    }
});

    or you can just…

    $("ul li .tag_detail button").on('click', function() {
    if ($(this).html() == 'Hook It!') {
        $(this).html('Unhook!');
    } else {
        $(this).html('Hook It!');
    }
});
    Reply 
  3. if ($(this).text() == 'Hook It!') {
    $(this).text('Unhook!');
} else if ($(this).text() == 'Unhook!') {
    $(this).text('Hook It!');
}

    Try the above. You are really dealing with text – not html.
    The second condition should be an else as well

    Reply

  4. A simple ternary operator should do the trick.

     $("ul li .tag_detail button").on('click',function(){
     var ths = $(this);
     ths.html(ths.html() == 'Hook It!' ? 'Unhook!' : 'Hook It!');
 });

    JSFIDDLE

    The problem with your code is you were updating the text value and then checking it again,reverting your changes.

    Reply 
  5. $("ul li .tag_detail button").on('click', function() {
    console.log($(this).html());
    if ($(this).html() == 'Hook It!') {
        $(this).html('Unhook!');
    } else {
        $(this).html('Hook It!');
    }
});
    Reply

  6. Please consider this:

    JS:

    $(function(){
    $('button').on('click', function() {
        if(this.innerHTML == 'Hook It')
            this.innerHTML = 'Unhook';
        else
            this.innerHTML = 'Hook It';
    });
});

    HTML:

    <script src="http://code.jquery.com/jquery-git2.js"></script>
<meta charset=utf-8 />
<button>Hook It

    Fiddle here: http://jsbin.com/dadjj/1/edit?js,output.

    A word of advice, before complaining about the missing html elements, you should watch this.

    Reply

  7. Hate if statements? This is an alternative:

    <button class="hook">Hook it!</button>

    Separate hook/unhook actions into separate functions:

    $('body').on('click', '.tag_detail button', function() {
    console.log('toggling');
    $(this).toggleClass('hook unhook');
})
.on('click', '.hook', function() {
    console.log('Clicked hooked!');
    $(this).text('Unhook it!');
})
.on('click', '.unhook', function() {
    console.log('Clicked un-hooked!');
    $(this).text('Hook it!');    
});
    Reply

Leave a Comment