En la clase pasado manipulamos el HTML desde JavaScript pero esto no sirve de mucho ya que podriamos hacerlo desde nuestro HTML y ya.

Lo realmente interesante es que manipulemos el HTML cuando el usuario realize una acción, por eso en esta clase veremos eventos en JavaScript.

<aside> 💡 Un evento es una acción del usuario ante la cual puede realizarse algún proceso (por ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace).

</aside>

Escuchando un input

Podemos utilizar el atributo onchange en el input y pasarle una función que haga referencia a la función definida en tu script.

<input id="numero" onchange="showNumber()" />

const numero = document.querySelector("#numero");

function showNumber() {
	console.log(numero)
}

<aside> 💡 Esto hará que cada vez que hagamos un cambio en el input y le quitemos el focus mostrará en consola lo que se escribió.

</aside>

Escuchando un botón

Para escuchar un botón podemos hacer uso de el atributo onclick y pasarle una función como vimos anteriormente.

<button id="btn" onclick="btnOnclick()">Haga click</button>

const btn = document.getElementById("btn");

function btnOnclick() {
	console.log("Hizo click");
}

<aside> 💡 Entonces cada vez que haga click en el boton se mostrará ese texto en consola.

</aside>