Change Text of button in jQuery or JavaScript

Question

I have a few buttons each with a specific class to differentiate it from other similar buttons. Class name follows the format moreid where id changes with button. I am using following code to change button text:

function changeText(btn){
  $('.'+btn).text(function(i, text){
    return text === "Show More" ? "Show Less" : "Show More";}
)}

I call this function using changeText(moreid). With this code I get the error:

Error: Syntax error, unrecognized expression: .[object HTMLDivElement]

This is the HTML of button

<button type="button" 
        class="btn btn-primary btn-lg moreapple" 
        data-toggle="collapse" 
        data-target="#moreapple" 
        onclick="changeText(moreapple)">Show More</button>

The only thing that change from one button to another is moreapple to morenews etc.

How can I change this function to change button text?

Show us your html code, also, how are you calling that function? Which is the param? — leo.fcx
– leo.fcx, Commented Jul 28, 2015 at 17:20
need the html code as well. your code works fine. try this jsfiddle.net/re0218gg — Sushil
– Sushil, Commented Jul 28, 2015 at 17:24
you should be passing changeText('moreapple') instead of changeText(moreapple) — Sushil
– Sushil, Commented Jul 28, 2015 at 17:28

Dhaval Marthak · Accepted Answer · 2015-07-28 17:26:48Z

1

Your changeText(btn) tells that, you're passing btn as an argument, so you might have to give this a try

$(btn).text(function(i, text){
    return text === "Show More" ? "Show Less" : "Show More";
});

Your markup should be like this unless you've specific requirements

<button type="button" 
        class="btn btn-primary btn-lg moreapple" 
        data-toggle="collapse" 
        data-target="#moreapple" 
        onclick="changeText(this)">Show More</button>

use $(btn) as it comes from the calling function changeText()

Fiddle Example

answered Jul 28, 2015 at 17:26

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

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

2 Comments

Sujata Hulsurkar Over a year ago

is btn used because of the class name btn?

Dhaval Marthak Over a year ago

@SujataHulsurkar It's a good practice to pass this if you want to target clicked element rather than class name, because in DOM there will be many elements having the same class.

Community · Accepted Answer · 2017-05-23 10:24:21Z

0

Obviously your Id's would be different depending on your naming convention Duplicate Question Answer

var status = "less";

function toggleText()
{
    var text="Here is some text that I want added to the HTML file";

    if (status == "less") {
        document.getElementById("textArea").innerHTML=text;
        document.getElementById("toggleButton").innerText = "See Less";
        status = "more";
    } else if (status == "more") {
        document.getElementById("textArea").innerHTML = "";
        document.getElementById("toggleButton").innerText = "See More";
        status = "less"
    }
}

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Jul 28, 2015 at 17:27

Huang Chen

1,20511 silver badges24 bronze badges

Comments

Nikhil Aggarwal · Accepted Answer · 2015-07-28 17:29:15Z

0

You need to update your markup from

<button type="button" 
        class="btn btn-primary btn-lg moreapple" 
        data-toggle="collapse" 
        data-target="#moreapple" 
        onclick="changeText(moreapple)">Show More</button>

to

<button type="button" 
        class="btn btn-primary btn-lg moreapple" 
        data-toggle="collapse" 
        data-target="#moreapple" 
        onclick="changeText('moreapple')">Show More</button> <!-- Pass moreapple as string -->

answered Jul 28, 2015 at 17:29

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Collectives™ on Stack Overflow

Change Text of button in jQuery or JavaScript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related