Jquery html() inside conditional check

Question

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

possible duplicate of [Button text toggle in jquery](http://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery) — Ram, Oct 01 '13 at 04:28

Arun P Johny · Accepted Answer · 2013-10-01T04:52:06.263

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

bluetoft · Answer 2 · 2013-10-01T04:44:12.250

1

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.

edited Oct 01 '13 at 04:44

answered Oct 01 '13 at 04:33

bluetoft

5,373
2
23
26

score 0 · Answer 3 · edited Feb 20 '21 at 01:11

0

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

edited Feb 20 '21 at 01:11

Mickael Lherminez

679
1
10
29

answered Oct 01 '13 at 04:26

TGH

38,769
12
102
135

score 0 · Answer 4 · edited Feb 20 '21 at 01:40

0

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

edited Feb 20 '21 at 01:40

Mickael Lherminez

679
1
10
29

answered Oct 01 '13 at 04:30

Shashank

830
1
6
14

score 0 · Answer 5 · edited Feb 20 '21 at 01:10

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

score 0 · Answer 6 · answered Oct 01 '13 at 04:39

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.

score 0 · Answer 7 · answered Oct 01 '13 at 05:03

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

Jquery html() inside conditional check

7 Answers7