html – How to change the buttons text using javascript

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

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.

html – How to change the buttons text using javascript

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 doesnt have security issues like innerHTML as it doesnt 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.