Accediendo a los inputs
-
Comprobaremos este enlace a la API con el valor actual de diferentes divisas respecto al euro.
-
Crearemos un campo dataset en cada input con el valor al cambio con el nombre que queramos:
index.html
<input class="valor" type="number" data-cambio="1"/>
<input class="valor" type="number" data-cambio="1.125"/>
<input class="valor" type="number" data-cambio="125.86"/>
<input class="valor" type="number" data-cambio="0.8647"/>
- Crearemos un script para establecer los valores iniciales de los inputs usando el método forEach que tienen los arrays en JavaScript:
scripts.js
let inputs = document.querySelectorAll(".valor");
inputs.forEach(function mostrarValor(input) {
console.log(input.value); // mostramos el valor
console.log(input.dataset.cambio); // mostramos el cambio
});
- La función puede ser anónima, sin tener nombre:
inputs.forEach(function (input) {
- Incluso se puede simplificar a una función flecha:
inputs.forEach((input) => {
- Como vemos nos sobra un paréntesis:
inputs.forEach(input => {
- Finalmente trasladamos el código JavaScript a un fichero scripts.js separado y lo cargamos justo antes de cerrar el body:
<script src="scripts.js" type="text/javascript"></script>