How can I correctly change the text displayed on a button using JavaScript?

General Discussions
, ,
1

I have an HTML input button like this:

<asp:Button ID="ShowButton" runat="server" CssClass="button black" Text="Show Filter" OnClientClick="showFilterItem(); return false;" />

My JavaScript function tries to update the button text with:

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

But the button text doesn’t change. What’s the right way to JavaScript change the button text here?

2

I’ve done quite a bit of UI scripting, and one thing I often see is confusion around <input> buttons vs <button> elements. If you’re using an <input type="button">, its label comes from the value attribute, not from innerHTML. So for a proper javascript change button text, this works:

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

That updates the visible text just fine. Simple and effective—just remember it’s the value, not the inner HTML.

3

Alternatively, use a <button> element in HTML, which supports inner HTML content:

<button id="ShowButton" onclick="showFilterItem()">Show Filter</button>

Then your original JS will work:

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

This is more flexible for text and HTML content inside buttons. This worked for me so shairng it hear , happy to help @kusha.kpr

4

Just to add to what @devan-skeem shared, you might run into cases where the text update doesn’t work because the DOM element hasn’t finished loading yet.

To ensure this:

–>Put your script at the end of the page, or

→ Use window.onload or DOMContentLoaded event to delay code execution until the button is ready.

Example:

window.onload = function() {
  document.getElementById("ShowButton").value = "Hide Filter";
};

This avoids issues where the element is not found.