Para el contexto, estoy creando una calculadora JS mediante la cual los valores que se muestran cambian dinámicamente en un 'cuadro de resumen' a medida que el usuario cambia los valores en los campos de entrada (usando un elemento <form> ).
He establecido valores predeterminados en los elementos <input> del formulario, pero las funciones de cálculo en el cuadro de resumen solo se llaman como una función de teclado cuando se cambian los valores en los campos de entrada.
Logré que esto funcionara perfectamente, sin embargo, en la carga de la página, los valores del cuadro de resumen no cambian, ya que esto se basa en la función keyup (que aún no ha ocurrido), por lo que, aunque hay valores predeterminados en las entradas, el cuadro de resumen no tiene nada para calcular (ya que está esperando que se ejecuten las funciones de teclado).
Ahora, encontré una solución al repetir los bloques DOM para reemplazar los valores en la carga de la página, pero el código no es muy SECO. Estoy seguro de que debe haber una manera de hacer esto. He intentado colocar el bloque de código en una matriz y/u objeto, pero no puedo extraerlo y ejecutarlo con éxito.
// THESE ARRAY ITEMS REPRESENT THE INPUT FIELDS IN THE HTML const innerElementsArr = [investment, buying, selling, invFee]; // APPLYING THE DOM CHANGES TO EACH INPUT ELEMENT ABOVE innerElementsArr.forEach(item => { item.onkeyup = function() { invDisplay.innerText = `£${investment.value}`; netProfit.innerText = `£${grossProfitLoss()}`; invFeeDisplay.innerText = `£${withInvFee()}`; netProfitLossDisplay.innerText = `£${netProfitDisplay()}`; }; }); // DISPLAY ALL CALCULATIONS ON PAGE LOAD invDisplay.innerText = `£${investment.value}`; netProfit.innerText = `£${grossProfitLoss()}`; invFeeDisplay.innerText = `£${withInvFee()}`; netProfitLossDisplay.innerText = `£${netProfitDisplay()}`;Como puede ver, me estoy repitiendo y me gustaría saber si hay una forma mucho más limpia de hacer esto.
Gracias de antemano.
Gracias a Ouroborus por la respuesta: fue una solución tan simple.
Creé una función que incluía el bloque DOM y luego llamé a esa función como un evento keyup y un evento window.onload.
const valuesToChange = () => { invDisplay.innerText = `£${investment.value}`; coinDisplay.innerText = `${coinsOwned()} BTC`; netProfit.innerText = `£${grossProfitLoss()}`; invFeeDisplay.innerText = `£${withInvFee()}`; exitFeeDisplay.innerText = `£${withExitFee()}`; netProfitLossDisplay.innerText = `£${netProfitDisplay()}`; }; // CHANGING THE VALUES IN THE SUMMARY AREA const innerElementsArr = [investment, buying, selling, invFee, exitFee]; innerElementsArr.forEach(item => { item.onkeyup = function() { valuesToChange(); }; }); // DISPLAY ALL CALCULATIONS ON PAGE LOAD window.onload = function() { valuesToChange(); };