Saltar al contenido principal

Ejercicio 2: Cambiando Color y Texto de un Elemento

Aprende a modificar dinámicamente el estilo y contenido de los elementos HTML con JavaScript. Descubre cómo cambiar el color y texto de un elemento de forma sencilla e interactiva.

Actividad​

  1. Crea un archivo HTML con un botón y un párrafo vacío.
  2. Al hacer clic en el botón, cambia el contenido del párrafo y su color usando innerHTML y style.color.

Solución​

Paso 1: Crear el archivo index.html​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cambiar Color y Texto</title>
  </head>
  <body>
    <h1>Ejercicio de Cambio de Color y Texto</h1>
    <button id="colorButton">Cambia el color</button>
    <p id="colorText"></p>

    <script src="script.js"></script>
  </body>
</html>

Paso 2: Escribir el código en script.js​

JavaScript
const colorButton = document.getElementById("colorButton");
const colorText = document.getElementById("colorText");

colorButton.addEventListener("click", () => {
  colorText.innerHTML = "¡El color ha cambiado!";
  colorText.style.color = "blue";
});
info

🔎 Revisa la sección Conceptos básicos de JavaScript donde econtrarás más información sobre este tema.