Cómo cambiar el texto de un botón con JavaScript

Para cambiar con JavaScript el texto de un botón, asigna un valor a value si se trata de <input type="button"> o <input type="submit">, y a textContent si es un elemento <button>. Puedes hacer esa asignación al inicializar la página o dentro de un controlador de eventos de desplazamiento o clic. jQuery ofrece los métodos correspondientes .val() y .text().

Los ejemplos de página web que aparecen a continuación son código fuente para el navegador que no se ha ejecutado y no tienen resultados de ejecución registrados. Guarda cada ejemplo HTML en un archivo independiente para probar la interacción en un navegador.

Cambiar el texto de un botón con JavaScript al cargar la página

Coloca el script después de los elementos para que ya existan cuando JavaScript los seleccione. Durante la inicialización, esta página cambia las etiquetas de ambos elementos input de Update a Remove y las de ambos elementos button a Hide Result:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<!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>

Un <input> es un elemento vacío: no tiene contenido hijo y la etiqueta visible del botón procede de value. Aunque hereda propiedades del DOM relacionadas con el texto, asignarles un valor no cambia la etiqueta que se muestra. Un <button> muestra su contenido hijo; su propiedad value cumple otra función, como proporcionar datos del formulario.

Para una etiqueta de botón de texto sin formato, textContent inserta texto literal. innerText trabaja con el texto renderizado y depende de los estilos; leerlo puede requerir trabajo de diseño de página. innerHTML interpreta el marcado HTML, por lo que insertar cadenas que no sean de confianza puede crear vulnerabilidades de inyección. Ninguna de las dos propiedades de texto interpreta como HTML la cadena asignada, pero eso no significa que todos sus usos sean siempre seguros ni que una sea siempre la más rápida. Encontrarás más contexto en esta comparación de las propiedades.

Al reemplazar todo el textContent de un botón también eliminas sus elementos hijos. Si el botón contiene un icono, coloca la etiqueta en un <span> aparte y actualiza ese elemento.

Si mueves el script al encabezado del documento, utiliza un script externo con defer o espera a DOMContentLoaded. querySelector() devuelve la primera coincidencia o null si ningún elemento coincide; si la asignación falla, comprueba el selector y el momento en que se ejecuta el script.

Cambiar el texto de un botón con JavaScript al pasar el puntero

Usa mouseover para cambiar la etiqueta cuando el puntero entre en el elemento y mouseout para restaurarla. CSS se encarga del cambio de fondo de rojo a verde:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<!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() registra una función de retorno de llamada; no provoca el evento por sí mismo. En estas funciones de retorno de llamada ordinarias, this hace referencia al botón en el que se registró el listener. La etiqueta inicial es Hide Result y la que aparece al pasar el puntero es Show Result!.

Estos eventos también pueden activarse al mover el puntero entre un elemento y sus descendientes. Si el botón contiene elementos anidados, considera usar mouseenter y mouseleave. El desplazamiento depende de un dispositivo señalador, así que procura que las instrucciones esenciales también estén disponibles sin pasar el puntero.

Cambiar el texto de un botón con JavaScript al hacer clic

Este elemento input empieza con la etiqueta Hide Result. Su controlador de clic selecciona el elemento por su ID único y alterna value entre Show Result y Hide Result:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<!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() recibe una cadena con el ID, sin el prefijo CSS #. El controlador usa igualdad estricta para elegir la siguiente etiqueta. Para un <button>, lee y asigna textContent. Cambiar la etiqueta por sí solo no muestra ni oculta contenido de resultados; si necesitas ese comportamiento, añádelo por separado.

El siguiente ejemplo autónomo de JavaScript aísla la misma función que elige la etiqueta para Node.js. La ejecución registrada produjo la salida que se muestra a continuación:

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

Esta ejecución solo prueba la función independiente que elige la etiqueta. Los eventos del DOM en el navegador y las interacciones de jQuery no se han ejecutado.

Cambiar el texto de un botón con jQuery

Usa .text() para un <button> y .val() para un botón de tipo input. Este ejemplo de navegador no se ha ejecutado y requiere que jQuery se cargue antes de registrar los controladores. Conserva la URL CDN de jQuery 1.7.1 del artículo de origen como dependencia de demostración; aquí no se han comprobado la disponibilidad de esa URL ni la idoneidad de esa versión para tu proyecto.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<!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>

Al hacer clic en el botón, su texto pasa a ser Show Result y su fondo se vuelve verde. Al hacer clic en el elemento input, su etiqueta pasa a ser Hide y su fondo se vuelve amarillo. Estos controladores asignan etiquetas fijas, no las alternan. .css() solo cambia la presentación; no cambia la etiqueta.

.html() también reemplaza el contenido del botón, pero interpreta el marcado; usa .text() cuando solo necesites una etiqueta de texto. .val() expresa directamente la tarea de cambiar la etiqueta de un elemento input, sin llamadas redundantes a .attr() y .prop() ni alternativas dependientes de la versión. La referencia de métodos HTML y CSS de jQuery ofrece más información.