Boton en HTML para cambiar texto

En HTML, es común utilizar botones para hacer cambios de texto dinámicos en una página web. En este tutorial, aprenderemos cómo utilizar un botón para cambiar el texto en una página web.

Paso 1 - Crear un botón

Para crear un botón en HTML, podemos utilizar la etiqueta button.

<button>Click aquí</button>

Paso 2 - Agregar un evento al botón

Para cambiar el texto al hacer clic en el botón, necesitamos agregar un evento. En este caso, utilizaremos el evento onclick.

<button onclick="cambiarTexto()">Click aquí</button>

Aquí, onclick es el evento que se activará al hacer clic en el botón, y cambiarTexto() es la función que se ejecutará cuando se active el evento.

Paso 3 - Crear la función para cambiar el texto

Ahora, debemos crear la función cambiarTexto() en JavaScript. Esta función cambiará el texto de un elemento HTML específico.

<button onclick="cambiarTexto()">Click aquí</button>

<p id="texto">Texto original</p>

<script>
  function cambiarTexto() {
    document.getElementById("texto").innerHTML = "Nuevo texto";
  }
</script>

Aquí, document.getElementById("texto") hace referencia al elemento HTML que tiene "texto" como su ID. La función innerHTML permite cambiar el contenido dentro de ese elemento.

Paso 4 - Verificar la funcionalidad

Finalmente, al hacer clic en el botón, el texto debe cambiar de "Texto original" a "Nuevo texto". Prueba el botón en tu navegador para verificar su funcionalidad.

¡Felicitaciones! Ahora sabes cómo utilizar un botón en HTML para cambiar el texto de una página web.