Este tutorial está diseñado para desarrolladores principiantes e intermedios en JavaScript que deseen aprender a vincular eventos de JavaScript con elementos HTML. Aprenderás a crear interacciones dinámicas en tus páginas web, permitiendo que los usuarios vean resultados en tiempo real basados en sus acciones. No se requiere más que conocimientos básicos de HTML, CSS y JavaScript.
Imagina que quieres hacer un script en JavaScript que tome el texto ingresado en un campo de un formulario HTML y lo muestre en la página cuando el usuario haga clic en un botón. Aquí están los pasos y el código para lograrlo:
Estructura HTML
Primero, crea un archivo HTML básico con un formulario que incluya un campo de texto y un botón.
<!DOCTYPE html><html><head><title>Mostrar Texto con JavaScript</title></head><body><h2>Formulario de Entrada</h2><inputtype="text"id="textoEntrada"placeholder="Escribe algo aquí"><buttononclick="mostrarTexto()">Mostrar Texto</button><pid="textoSalida"></p><scriptsrc="script.js"></script></body></html>Script JavaScript
Crea un archivo script.js y escribe el siguiente código JavaScript. Este script recogerá el valor del campo de texto y lo mostrará en el párrafo cuando el usuario haga clic en el botón.
functionmostrarTexto() {
var texto = document.getElementById('textoEntrada').value;
document.getElementById('textoSalida').innerText = texto;
}
Explicación del Código:
mostrarTexto(): Es la función que se llama cuando el usuario hace clic en el botón.
document.getElementById(‘textoEntrada’).value: Obtiene el valor del campo de texto.
document.getElementById(‘textoSalida’).innerText = texto: Establece el texto del párrafo (<p>) con el valor obtenido del campo de texto.
Prueba tu Código
Abre el archivo HTML en un navegador.
Escribe algo en el campo de texto y haz clic en el botón “Mostrar Texto”.
Verás el texto que escribiste aparecer debajo del botón.
Este ejemplo es una forma simple de interactuar con los elementos HTML usando JavaScript y es un buen punto de partida para entender cómo JavaScript puede manipular el contenido de una página web.
