Tengo tres entradas y tres variables, mi objetivo es cambiar los valores de las variables con los valores dentro de las entradas
const inputs = [ document.querySelector(".bill-input"), document.querySelector(".custom"), document.querySelector(".people-number"), ]; var bill = 0; var tip = 0; var people = 0;Logré hacerlo de esta manera.
inputs[0].addEventListener("keyup", (e) => { bill = Number(e.target.value); }); inputs[1].addEventListener("keyup", (e) => { tip = Number(e.target.value); }); inputs[2].addEventListener("keyup", (e) => { people = Number(e.target.value); });Estoy bastante seguro de que esta no es la forma óptima de hacerlo, así que quería preguntar si hay una forma de hacerlo con forEach o cualquier otro método que no requiera que escriba cada uno cada vez.
// Initialise the values object const values = { bill: 0, tip: 0, people: 0 }; // Cache the inputs, and add listeners to them const inputs = document.querySelectorAll('input'); inputs.forEach(input => input.addEventListener('keyup', handleChange)); // Grab the id from the input's dataset, and // set the values object property to match // the input value function handleChange() { const { id } = this.dataset; values[id] = this.value; console.log(JSON.stringify(values)); } input { display: block; } Bill<input data-id="bill"> Tip <input data-id="tip"> People <input data-id="people">Documentación adicional
Sí, puede usar forEach. Usé un interruptor para obtener el índice del elemento de entrada (en las entradas constantes) para saber qué variable se actualiza.
Por favor, vea el fragmento a continuación:
var bill = 0; var tip = 0; var people = 0; const inputs = [ document.querySelector(".bill-input"), document.querySelector(".custom"), document.querySelector(".people-number"), ]; inputs.forEach(function(item,index){ item.addEventListener("keyup", (e) => { const val = Number(e.target.value); switch(index){ case 0 : bill = val; break; case 1 : tip = val; break; case 2 : people = val; break; } console.log(bill,tip,people) }); }); <input value="3" type="number" class="bill-input"> <input value="10" type="number" class="custom"> <input value="100" type="number" class="people-number">