Existe un patrón de diseño llamado Observer que vemos en el Curso Profesional de JavaScript que puede ayudar a aplicar un tipo de observador de cambios a algún elemento y actualizar el estado de la aplicación en dado caso en que lo hagamos con Vanilla JavaScript.
.
El evento input ayuda a detectar cuando un usuario está introduciendo información en un campo de texto.
.
Dejo mi código 👀:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span></span>
<input type="text">
</div>
<script>
const data = {
message: "Hola mundo"
}
const span = document.querySelector("span");
span.innerText = data.message;
const input = document.querySelector("input");
input.value = data.message;
input.addEventListener("input", () => {
data.message = input.value;
span.innerText = data.message;
})
</script>
</body>
</html>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.