javascript - Jquery html() inside conditional check - Stack Overflow

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());

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());

• javascript
• jquery
• html
• dom

Share Improve this question Follow edited Feb 20, 2021 at 1:08 Mickael Lherminez 69511 gold badge1111 silver badges3030 bronze badges asked Oct 1, 2013 at 4:24 Wanna_be_CoderWanna_be_Coder 2911 gold badge11 silver badge1010 bronze badges 2

• 1 you should use else if, put else before second if – Cԃաԃ Commented Oct 1, 2013 at 4:26
• possible duplicate of Button text toggle in jquery – Ram Commented Oct 1, 2013 at 4:28

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 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!';
    });
});

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.

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./jquery-git2.js"></script>
<meta charset=utf-8 />
<button>Hook It

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

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

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!');    
});

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!');
    }
});

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

$("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!');
    }
});