jQuery: Change button text on click

Question

After seeing Toggling button text in jquery this question, I tried to re create it in my situation but can't seem to have it work.

Here is a fiddle of what I've done: http://jsfiddle.net/V4u5X/

$('.SeeMore2').click(function(){
    var $this = $(this);
    $this.toggleClass('SeeMore');
    if($this.hasClass('.SeeMore2')){
        $this.text('See More');         
    } else {
        $this.text('See Less');
    }
});

It seems to only ever run the if statement once. What am I missing?

Don't put a . in the argument to hasClass.

Barmar
– Barmar

2013-10-14 17:03:11 +00:00
Commented Oct 14, 2013 at 17:03 — Barmar
– Barmar, Commented Oct 14, 2013 at 17:03
If I do that it actually doesn't change the text at all

Scherf
– Scherf

2013-10-14 17:04:28 +00:00
Commented Oct 14, 2013 at 17:04 — Scherf
– Scherf, Commented Oct 14, 2013 at 17:04
You toggle the seeMore class but never deals with seemore2

Royi Namir
– Royi Namir

2013-10-14 17:04:29 +00:00
Commented Oct 14, 2013 at 17:04 — Royi Namir
– Royi Namir, Commented Oct 14, 2013 at 17:04
possible duplicate of Button text toggle in jquery

Ram
– Ram

2013-10-14 17:06:32 +00:00
Commented Oct 14, 2013 at 17:06 — Ram
– Ram, Commented Oct 14, 2013 at 17:06

Kierchon · Accepted Answer · 2013-10-14 17:05:05Z

46

$('.SeeMore2').click(function(){
    var $this = $(this);
    $this.toggleClass('SeeMore2');
    if($this.hasClass('SeeMore2')){
        $this.text('See More');         
    } else {
        $this.text('See Less');
    }
});

This should do it. You have to make sure you toggle the correct class and take out the "." from the hasClass

http://jsfiddle.net/V4u5X/2/

answered Oct 14, 2013 at 17:05

Kierchon

2,2991 gold badge21 silver badges25 bronze badges

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

2 Comments

Scherf Over a year ago

facepalm I misunderstood how the argument worked for .toggleClass. I assumed that you would specify a seperate class within the (). In my original it still has the class of SeeMore2, now that I look at it. Thanks for the help!

user2589071 Over a year ago

Doesn't work on archives which contain multiple entries with more than 1 instance of the same button. @Scherf

Abhishek · Accepted Answer · 2016-08-12 08:53:57Z

7

try this, this javascript code to change text all time to click button.http://jsfiddle.net/V4u5X/2/

html code

<button class="SeeMore2">See More</button>

javascript

$('.SeeMore2').click(function(){
        var $this = $(this);
        $this.toggleClass('SeeMore2');
        if($this.hasClass('SeeMore2')){
            $this.text('See More');         
        } else {
            $this.text('See Less');
        }
    });

answered Aug 12, 2016 at 8:53

Abhishek

3164 silver badges17 bronze badges

Comments

Wajid khan · Accepted Answer · 2018-09-10 08:21:22Z

3

In HTML:

<button type="button" id="AddButton" onclick="AddButtonClick()" class="btn btn-success btn-block ">Add</button>

In Jquery write this function:

    function AddButtonClick(){ 
      //change text from add to Update
      $("#AddButton").text('Update');
    }

answered Sep 10, 2018 at 8:21

Wajid khan

8729 silver badges19 bronze badges

Comments

Naresh Kumar · Accepted Answer · 2014-07-02 07:12:20Z

2

its work short code

$('.SeeMore2').click(function(){ var $this = $(this).toggleClass('SeeMore2'); if($(this).hasClass('SeeMore2')) { $(this).text('See More'); } else { $(this).text('See Less'); } });

edited Jul 2, 2014 at 7:12

answered Jul 2, 2014 at 7:06

Naresh Kumar

3553 silver badges6 bronze badges

Comments

Minal Chauhan · Accepted Answer · 2021-04-30 11:07:29Z

2

Use :

$("button").click(function(){
  $(this).html("the new text");
});

edited Apr 30, 2021 at 11:07

Minal Chauhan

6,16812 gold badges24 silver badges41 bronze badges

answered Apr 29, 2021 at 23:58

adel.N

313 bronze badges

Comments

mlnyc · Accepted Answer · 2013-10-14 17:05:36Z

1

This should work for you:

    $('.SeeMore2').click(function(){
        var $this = $(this);
        $this.toggleClass('SeeMore2');
        if($this.hasClass('SeeMore2')){
            $this.text('See More');         
        } else {
            $this.text('See Less');
        }
});

answered Oct 14, 2013 at 17:05

mlnyc

2,7362 gold badges25 silver badges31 bronze badges

Collectives™ on Stack Overflow

jQuery: Change button text on click

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related