How to change the button's text using JavaScript

Question

I have the following code to set the text of the button through javascript code , but it does not work it remains same the text remains same.

function showFilterItem() {
    if (filterstatus == 0) {
        filterstatus = 1;
        $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
        document.getElementById("ShowButton").innerHTML = "Hide Filter";
    }
    else {
        filterstatus = 0;
        $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
        document.getElementById("ShowButton").innerHTML = "Show filter";
    }
}

And my html button code is

  <input  class="button black" id="ShowButton" type="button" runat="server"  value="Show Filter" onclick="showFilterItem()" />

Changing button text and not value using JavaScript

tempy
– tempy

2012-10-15 17:53:10 +00:00
Commented Oct 15, 2012 at 17:53 — tempy
– tempy, Commented Oct 15, 2012 at 17:53

Someone · Accepted Answer · 2020-05-01 16:04:24Z

147

If the HTMLElement is input[type='button'], input[type='submit'], etc.

<input id="ShowButton" type="button" value="Show">
<input id="ShowButton" type="submit" value="Show">

change it using this code:

document.querySelector('#ShowButton').value = 'Hide';

If, the HTMLElement is button[type='button'], button[type='submit'], etc:

<button id="ShowButton" type="button">Show</button>
<button id="ShowButton" type="submit">Show</button>

change it using any of these methods,

document.querySelector('#ShowButton').innerHTML = 'Hide';
document.querySelector('#ShowButton').innerText = 'Hide';
document.querySelector('#ShowButton').textContent = 'Hide';

Please note that

input is an empty tag and cannot have innerHTML, innerText or textContent
button is a container tag and can have innerHTML, innerText or textContent

Ignore this answer if you ain't using asp.net-web-forms, asp.net-ajax and rad-grid

You must use value instead of ~~innerHTML~~.

Try this.

document.getElementById("ShowButton").value= "Hide Filter";

And since you are running the button at server the ID may get mangled in the framework. I so, try

document.getElementById('<%=ShowButton.ClientID %>').value= "Hide Filter";

Another better way to do this is like this.

On markup, change your onclick attribute like this. onclick="showFilterItem(this)"

Now use it like this

function showFilterItem(objButton) {
    if (filterstatus == 0) {
        filterstatus = 1;
        $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
        objButton.value = "Hide Filter";
    }
    else {
        filterstatus = 0;
        $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
        objButton.value = "Show filter";
    }
}

edited May 1, 2020 at 16:04

Someone

2412 silver badges17 bronze badges

answered Aug 12, 2011 at 5:17

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

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

4 Comments

ErocM Over a year ago

was looking for this: document.getElementById("ShowButton").value= "Hide Filter"; Thanks!

Maitreya Over a year ago

This answer is outdated and now incorrect, it should be removed.

Cave Johnson Over a year ago

@Maitreya The OP is using <input type="button"> so element.value is the correct way to change the button's displayed text. innerText, innerHTML, and textContent would be used if you are using <button></button> since it has a opening and closing tag.

Momoro Over a year ago

This answer is very helpful! I was looking for document.querySelector('#ShowButton').value = 'Hide'; for a long time ....

Maitreya · Accepted Answer · 2016-12-22 02:28:29Z

76

innerText is the current correct answer for this. The other answers are outdated and incorrect.

document.getElementById('ShowButton').innerText = 'Show filter';

innerHTML also works, and can be used to insert HTML.

answered Dec 22, 2016 at 2:28

Maitreya

1,27611 silver badges13 bronze badges

2 Comments

Wesley Over a year ago

You are correct. Thanks for the help. .value did not work in Chrome but .innerText did.

Cave Johnson Over a year ago

This isn't the correct answer for the OP's specific issue. <input> does not have an innerText

jackD · Accepted Answer · 2017-08-03 13:24:46Z

24

I know this question has been answered but I also see there is another way missing which I would like to cover it.There are multiple ways to achieve this.

1- innerHTML

document.getElementById("ShowButton").innerHTML = 'Show Filter';

You can insert HTML into this. But the disadvantage of this method is, it has cross site security attacks. So for adding text, its better to avoid this for security reasons.

2- innerText

document.getElementById("ShowButton").innerText = 'Show Filter';

This will also achieve the result but its heavy under the hood as it requires some layout system information, due to which the performance decreases. Unlike innerHTML, you cannot insert the HTML tags with this. Check Performance Here

3- textContent

document.getElementById("ShowButton").textContent = 'Show Filter';

This will also achieve the same result but it doesn't have security issues like innerHTML as it doesn't parse HTML like innerText. Besides, it is also light due to which performance increases.

So if a text has to be added like above, then its better to use textContent.

answered Aug 3, 2017 at 13:24

jackD

8012 gold badges8 silver badges27 bronze badges

1 Comment

Varun Verma Over a year ago

My button was like this: <button class="ts-button ts-padding-large ts-light-grey" style="margin-top:32px" onclick="toggleGalleries(this)">MORE GALLERIES</button> So using value didn't work but using textContent did the trick. Thanks for sharing!

Jakub H. · Accepted Answer · 2016-01-28 17:14:29Z

3

Another solution could be using jquery button selector inside the if else statement $("#buttonId").text("your text");

function showFilterItem() {
if (filterstatus == 0) {
    filterstatus = 1;
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
    $("#ShowButton").text("Hide Filter");
}
else {
    filterstatus = 0;
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
     $("#ShowButton").text("Show Filter");
}}

answered Jan 28, 2016 at 17:14

Jakub H.

1351 silver badge10 bronze badges

Comments

Q07 · Accepted Answer · 2015-06-12 09:12:18Z

0

You can toggle filterstatus value like this

filterstatus ^= 1;

So your function looks like

function showFilterItem(objButton) {
if (filterstatus == 0) {
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
    objButton.value = "Hide Filter";
}
else {
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
    objButton.value = "Show filter";
}
  filterstatus ^= 1;    
}

answered Jun 12, 2015 at 9:12

Q07

852 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to change the button's text using JavaScript

5 Answers 5

Ignore this answer if you ain't using asp.net-web-forms, asp.net-ajax and rad-grid

4 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Ignore this answer if you ain't using asp.net-web-forms, asp.net-ajax and rad-grid

4 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related