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>
<input type="text" id="textoEntrada" placeholder="Escribe algo aquí">
<button onclick="mostrarTexto()">Mostrar Texto</button>
<p id="textoSalida"></p>
<script src="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.
function mostrarTexto() {
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.
Curso Práctico de JavaScript
