Texto del botón de cambio de JavaScript

1. Texto del botón de cambio de JavaScript al cargar
2. Texto del botón de cambio de JavaScript al pasar el mouse
3. Texto de botón de cambio de JavaScript al hacer clic
4. Texto de botón de cambio de JavaScript usando jQuery

Nuestro objetivo es aprender sobre el texto del botón de cambio de JavaScript a través de un código de ejemplo. Muestra cómo cambia el texto del botón al cargar, hacer clic y pasar el mouse. También ejemplifica el uso de jQuery para cambiar el texto del botón.

Texto del botón de cambio de JavaScript al cargar

Si tiene un elemento HTML <input> como input[type='button'] o input[type='submit'], entonces puede cambiar el texto del botón de la siguiente manera.

Código HTML:

<input id="btn" type="button" value="Update">
<input id="btnSubmit" type="submit" value="Update">

Código JavaScript:

document.querySelector('#btn').value = 'Remove';
document.querySelector('#btnSubmit').value = 'Remove';

También puede cambiar el texto del botón del elemento HTML <button> utilizando cualquiera de los métodos que se indican a continuación (los métodos dados son .innerHTML, .innerText y .textContent).

Código HTML:

<button id="btn" type="button" value="Show Result">Show Result</button>
<button id="btnSubmit" type="submit" value="Submit Result">Submit Result</button>

Código JavaScript:

// querySelector selects the element whose id's value is btn
document.querySelector('#btn').innerHTML = 'Hide Result';
document.querySelector('#btn').innerText = 'Hide Result';
document.querySelector('#btn').textContent = 'Hide Result';

// querySelector selects the element whose id's value is btnSubmit
document.querySelector('#btnSubmit').innerHTML = 'Hide Result';
document.querySelector('#btnSubmit').innerText = 'Hide Result';
document.querySelector('#btnSubmit').textContent = 'Hide Result';

¿Podemos usar .innerHTML, .innerText y .textContent para el elemento HTML <input>? No. El motivo es que <input> es un elemento vacío, mientras que <button> es una etiqueta de contenedor y tiene las propiedades .innerHTML, .innerText y .textContent.

Aunque el objetivo se logra utilizando .innerHTML, .innerText y .textContent, debe tener ciertos puntos en mente.

1. Es posible que deba enfrentar ataques de seguridad entre sitios debido al uso de JavaScript .innerHTML.
2. JavaScript .innerText reduce el rendimiento porque necesita detalles sobre el sistema de diseño.
3. JavaScript .textContent no plantea problemas de seguridad como .innerHTML. Tampoco tiene que analizar el contenido HTML como .innerText, lo que da como resultado el mejor rendimiento.

Ahora, ya conoces las diferencias entre ellos. Por lo tanto, elija cualquiera de estos métodos que se adapte a los requisitos de su proyecto. Puedes leer más sobre ellos aquí.

Texto del botón de cambio de JavaScript al pasar el mouse

Código HTML:

<button class="button">Hide Result</button>

Código CSS:

.button {
 background-color: red;
}
.button:hover {
 background-color: green;
}

Código JavaScript:

let btn = document.querySelector('.button');

btn.addEventListener('mouseover', function() {
  this.textContent = 'Show Result!';
})
btn.addEventListener('mouseout', function() {
  this.textContent = 'Hide Result';
})

El código anterior debería mostrar una salida donde el texto y el color del botón cambian cuando el puntero del mouse pasa por encima del botón.

El querySelector() genera el primer elemento que coincide con el selector definido. El addEventListener() adjunta un controlador de eventos al elemento dado y configura un método para desencadenar un evento en particular.

Usamos eventos mouseover y mouseout, y .textContent cambia el texto del botón.

Texto de botón de cambio de JavaScript al hacer clic

Código HTML:

<input onclick="changeText()" type="button" value="Hide Result" id="btn">

Código JavaScript:

function changeText() {
  let element = document.getElementById('btn');
  if (element.value == 'Hide Result')
    element.value = 'Show Result';
  else
    element.value = 'Hide Result';
}

changeText() se ejecuta al hacer clic en el botón. Este método obtiene el primer elemento que coincide con el selector especificado usando getElementById(). Luego, verifica el valor del elemento y cambia de acuerdo con la declaración if-else.

Texto de botón de cambio de JavaScript usando jQuery

Código HTML:

<!DOCTYPE>
<html>
 <head>
 	<title>Change Text</title>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <body>
 	<button id="button" onclick="changeText()">Hide Result</button>
 </body>
</html>

Código JavaScript:

function changeText() {
  $('#button').html('Show Result');
  $('#button').css('background-color', 'green');
}

El código anterior cambia el texto del botón de Ocultar resultado a Mostrar resultado cuando hace clic en el botón, y también cambia el color del botón a verde.

El .html() establece el contenido del elemento seleccionado mientras que .css() cambia el background-color a verde. Recuerde, .html() se usa para el elemento HTML <button>.

Para obtener más detalles sobre estas funciones, consulta este enlace.

Quizás esté pensando en cómo podemos cambiar el texto usando jQuery si tenemos el elemento HTML <input>. El siguiente código es para que lo entiendas.

Código HTML:

<!DOCTYPE>
<html>
 <head>
 	<title>Change Text</title>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <body>
 	<input type="button" id="btnShow" value="Show" onclick="changeText()">
 </body>
</html>

Código JavaScript:

function changeText() {
  $('#btnShow').attr('value', 'Hide');  // versions older than 1.6
  $('#btnShow').prop('value', 'Hide');  // versions newer than 1.6
  $('#btnShow').css('background-color', 'yellow');
}

Puede usar .attr() o prop() (según la versión de jQuery) para cambiar el texto del botón del elemento HTML <input>. Tanto .attr() como .prop() apuntan al atributo value del elemento <input> y cambian su valor de acuerdo con el segundo parámetro.

En este código de ejemplo, el segundo parámetro es Hide. El método changeText() también cambia el color de fondo a amarillo usando la función .css().