How to change the buttons 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()" /> 

Answer 1

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

Answer 2

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.