Cómo Obtener el Valor de un Input y Mostrarlo en una Etiqueta con JavaScript

Aquí te muestro cómo capturar el valor de un campo de texto (input) y mostrarlo en otra parte de la página al hacer clic en un botón, usando JavaScript:

HTML Básico

html

<div>
  <input type="text" id="miInput" placeholder="Escribe algo...">
  <button id="miBoton">Mostrar texto</button>
  <p id="resultado"></p>
</div>

Solución con JavaScript

Opción 1: JavaScript tradicional

javascript

document.getElementById('miBoton').addEventListener('click', function() {
  // Obtener el valor del input
  const texto = document.getElementById('miInput').value;
  
  // Mostrar el valor en el párrafo
  document.getElementById('resultado').textContent = texto;
});

Opción 2: Usando arrow functions (ES6)

javascript

const boton = document.getElementById('miBoton');
const input = document.getElementById('miInput');
const resultado = document.getElementById('resultado');

boton.addEventListener('click', () => {
  resultado.textContent = input.value;
});

Explicación:

1. Seleccionamos elementos: Usamos getElementById para obtener referencias al input, botón y etiqueta donde mostraremos el resultado.

2. Escuchamos el evento click: Añadimos un event listener al botón que se activará cuando el usuario haga clic.

3. Obtenemos el valor: Usamos la propiedad .value para leer el texto del input.

4. Mostramos el resultado: Asignamos el valor al textContent del elemento donde queremos mostrarlo.

Versión mejorada (validación incluida)

javascript

document.getElementById('miBoton').addEventListener('click', function() {
  const input = document.getElementById('miInput');
  const resultado = document.getElementById('resultado');
  
  if(input.value.trim() === '') {
    resultado.textContent = 'Por favor, escribe algo';
    resultado.style.color = 'red';
  } else {
    resultado.textContent = input.value;
    resultado.style.color = 'black';
  }
});

¡Listo! Ahora cada vez que escribas algo en el input y hagas clic en el botón, verás el texto aparecer en el párrafo de resultado.