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, Jul 28 '15 at 17:20
need the html code as well. your code works fine. try this http://jsfiddle.net/re0218gg/ — Sushil, Jul 28 '15 at 17:24
you should be passing `changeText('moreapple')` instead of `changeText(moreapple)` — Sushil, Jul 28 '15 at 17:28

score 1 · Accepted Answer · answered Jul 28 '15 at 17:26

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 '15 at 17:26

Dhaval Marthak

17,246
6
46
68

is `btn` used because of the class name `btn`? – Sujata Hulsurkar Jul 28 '15 at 17:33
@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. – Dhaval Marthak Jul 29 '15 at 08:20

score 0 · Answer 2 · edited May 23 '17 at 10:24

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"
    }
}

score 0 · Answer 3 · answered Jul 28 '15 at 17:29

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 -->

Change Text of button in jQuery or JavaScript

3 Answers3