How to Change Button Text in JavaScript

To change button text with JavaScript, assign to value for an <input type="button"> or <input type="submit">, and to textContent for a <button>. You can make that assignment during page initialization or inside a hover or click handler. jQuery provides corresponding .val() and .text() methods.

The browser examples below are unexecuted browser-page source; they have no recorded runtime output. Save each HTML example as its own file to try the interaction in a browser.

JavaScript Change Button Text on Load

Place the script after the elements so they exist before JavaScript selects them. This page changes both input labels from Update to Remove and both button labels to Hide Result during initialization:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Change labels on load</title>
</head>
<body>
  <input id="loadInput" type="button" value="Update">
  <input id="loadSubmit" type="submit" value="Update">
  <button id="loadButton" type="button">Show Result</button>
  <button id="loadSubmitButton" type="submit">Submit Result</button>

  <script>
    document.querySelector('#loadInput').value = 'Remove';
    document.querySelector('#loadSubmit').value = 'Remove';
    document.querySelector('#loadButton').textContent = 'Hide Result';
    document.querySelector('#loadSubmitButton').textContent = 'Hide Result';
  </script>
</body>
</html>

An <input> is a void element: it has no child content, and its visible button label comes from value. Although it inherits text-related DOM properties, setting those properties does not change its displayed label. A <button> displays its child content; its value serves a different purpose, such as supplying form data.

For a plain button label, textContent inserts literal text. innerText handles rendered text and is sensitive to styling; reading it can require layout work. innerHTML parses HTML markup, so inserting untrusted strings can introduce injection vulnerabilities. Neither text property parses the assigned string as HTML, but that does not make every use universally secure or fastest. More background is available in the existing comparison of these properties.

Replacing a button’s entire textContent also removes its child elements. If the button contains an icon, put the label in a separate <span> and update that span instead.

If you move the script into the document head, use an external script with defer or wait for DOMContentLoaded. querySelector() returns the first match, or null when no element matches; check the selector and script timing if the assignment fails.

JavaScript Change Button Text on Mouseover

Use mouseover to change the label when the pointer enters and mouseout to restore it. CSS handles the accompanying red-to-green background change:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Change a label on hover</title>
  <style>
    #hoverButton { background-color: red; }
    #hoverButton:hover { background-color: green; }
  </style>
</head>
<body>
  <button id="hoverButton" type="button">Hide Result</button>

  <script>
    const hoverButton = document.querySelector('#hoverButton');
    hoverButton.addEventListener('mouseover', function () {
      this.textContent = 'Show Result!';
    });
    hoverButton.addEventListener('mouseout', function () {
      this.textContent = 'Hide Result';
    });
  </script>
</body>
</html>

addEventListener() registers a callback; it does not trigger the event itself. In these ordinary function callbacks, this refers to the button on which the listener was registered. The initial label is Hide Result; the hover label is Show Result!.

These events can also fire when moving between an element and its descendants. For a button with nested content, consider mouseenter and mouseleave. Hover depends on a pointing device, so keep essential instructions available without hovering.

JavaScript Change Button Text on Click

This input starts with Hide Result. Its click handler selects the element by its unique ID and alternates its value between Show Result and Hide Result:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Toggle a button label</title>
</head>
<body>
  <input id="clickInput" type="button" value="Hide Result">

  <script>
    function nextButtonText(currentText) {
      return currentText === 'Hide Result' ? 'Show Result' : 'Hide Result';
    }

    function changeText() {
      const element = document.getElementById('clickInput');
      element.value = nextButtonText(element.value);
    }

    document.getElementById('clickInput').addEventListener('click', changeText);
  </script>
</body>
</html>

getElementById() takes an ID string without the CSS # prefix. The handler uses strict equality to choose the next label. For a <button>, read and assign textContent instead. Changing the label alone does not show or hide any result content; add that behavior separately if required.

The following self-contained JavaScript example isolates the same label-selection function for Node.js. Its recorded execution produced the output shown below:

function nextButtonText(currentText) {
  return currentText === 'Hide Result' ? 'Show Result' : 'Hide Result';
}

let label = 'Hide Result';
label = nextButtonText(label);
console.log(label);
label = nextButtonText(label);
console.log(label);

Show Result
Hide Result

This execution exercises only the standalone label-selection function. The browser DOM events and jQuery interactions remain unexecuted.

JavaScript Change Button Text Using jQuery

Use .text() for a <button> and .val() for an input button. This unexecuted browser example requires jQuery to load before the handlers are registered. It retains the source article’s jQuery 1.7.1 CDN URL as a demonstration dependency; that URL and version have not been checked here for availability or suitability for your project.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Change labels with jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
  <button id="jqueryButton" type="button">Hide Result</button>
  <input id="jqueryInput" type="button" value="Show">

  <script>
    $('#jqueryButton').on('click', function () {
      $(this).text('Show Result').css('background-color', 'green');
    });
    $('#jqueryInput').on('click', function () {
      $(this).val('Hide').css('background-color', 'yellow');
    });
  </script>
</body>
</html>

Clicking the button sets its text to Show Result and its background to green. Clicking the input sets its label to Hide and its background to yellow. These handlers assign fixed labels rather than toggling them. .css() changes presentation only; it does not change the label.

.html() also replaces button content, but parses markup; use .text() when you only need a text label. .val() directly expresses the input-label task without redundant .attr() and .prop() calls or version-dependent alternatives. The existing jQuery HTML and CSS method reference provides further background.