I'm having trouble figuring out why parseInt() isn't working correctly in my code, especially when passing numbers through to my function parameters. It keeps returning NaN in both my array and the function's return value.
What I'm attempting to do is to display the index percentage of two values entered into input fields in the HTML and store the value in an array. I'm using a function for this because I need to perform over twenty outlet calculations. I'm also finding it challenging to refactor this code as I'm not very experienced with JS. Any assistance would be greatly appreciated.
Here is my 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>