Parece que no puedo entender por qué parseInt() no funciona correctamente en mi código cuando trato de pasar números a los parámetros de mi función. Parece que sigue apareciendo NaN tanto en mi matriz como en el valor de retorno de la función.
Lo que estoy tratando de hacer es cuando los valores se ingresan en los campos de entrada, el porcentaje de índice de estos dos valores aparece en el HTML y almacena el valor en una matriz. Estoy usando una función para esto porque quiero tener más de veinte cálculos de salida. También estoy luchando por refactorizar este código ya que no tengo mucha experiencia con JS. Cualquier ayuda sería realmente apreciada.
Aquí está mi HTML.
function outletIndex(actual, design) { let result1 = actual / design * 100; var indexArray = []; indexArray.push(result1); console.log(indexArray, result1); if (!isNaN(result1)) { document.getElementById("percentage").textContent = `${result1.toFixed(1)}%`; } } const x = parseInt(document.getElementById("outlet_actual_1" ).valueAsNumber); const y = parseInt(document.getElementById("outlet_design_1").valueAsNumber); const outlet1Index = outletIndex(x, y); <table> <tr> <div class="form-group row 1" id="outlets1"> <td><label >Outlet Design</label> <input name = "outlet 1 design" class="form-control design_1" id="outlet_design_1" type="number" placeholder="Outlet 1 Design" /> </td> <td><label >Outlet Actual</label> <input name="outlet 1 actual" class="form-control actual_1" id="outlet_actual_1" type="number" placeholder="Outlet 1 Actual" onblur="outletIndex();" /> </td> <td><label >Outlet Balance</label> <input name="outlet_balance" class="form-control" input value="" id="outlet_balance_1" type="text" placeholder="Outlet 1 Balance" /> </td><td> <div class="proportion" id="percentage"> </div> </td> </div> </tr>El principal problema aquí es el código que lee x e y se ejecuta antes de que haya algún valor en ellos.
El segundo problema es cuando blur el control con id outlet_actual_1 llamas a tu método, pero sin argumentos, cuando espera que actual y el design se pasen como argumentos.
Finalmente, si usa valueAsNumber , no es necesario usar parseInt . Si desea usarlo, lea el value y asegúrese de usar la raíz como parseInt(document.getElementById("outlet_actual_1" ).value, 10)
La manera simple de hacer que esto funcione es mover el código que lee x e y dentro del método y eliminar los argumentos, pero probablemente haya más que eso, sospecho que desea volver a calcular cada vez que cambie cualquiera de los campos, así que agreguemos eso también. :
function outletIndex() { const actual = document.getElementById("outlet_actual_1" ).valueAsNumber || 0 ; const design = document.getElementById("outlet_design_1").valueAsNumber || 0 ; let result1 = actual / design * 100; var indexArray = []; indexArray.push(result1); console.log(indexArray, result1); if (!isNaN(result1)) { document.getElementById("percentage").textContent = `${result1.toFixed(1)}%`; } } <table> <tr> <div class="form-group row 1" id="outlets1"> <td><label >Outlet Design</label> <input name = "outlet 1 design" class="form-control design_1" id="outlet_design_1" type="number" placeholder="Outlet 1 Design" onblur="outletIndex();" /> </td> <td><label >Outlet Actual</label> <input name="outlet 1 actual" class="form-control actual_1" id="outlet_actual_1" type="number" placeholder="Outlet 1 Actual" onblur="outletIndex();" /> </td> <td><label >Outlet Balance</label> <input name="outlet_balance" class="form-control" input value="" id="outlet_balance_1" type="text" placeholder="Outlet 1 Balance" /> </td><td> <div class="proportion" id="percentage"> </div> </td> </div> </tr> Hay muchas mejoras adicionales que se pueden hacer a su código, comenzaría leyendo sobre addEventListener en lugar de usar controladores de eventos en línea como onblur