Problems with pasrseInt()

Question

我似乎无法弄清楚为什么parseInt()在我的代码中不能正常工作时，我试图通过我的函数参数传递数字。它似乎不断出现NaN在我的数组和函数返回值。

我想做的是，当值键入输入字段时，这两个值的索引百分比出现在HTML中，并将值存储在数组中。我为此使用了一个函数，因为我希望有超过20个出口计算。我也在努力重构这段代码，因为我没有太多的JS经验。任何帮助都会非常感激。
这是我的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>

Answer 1

这里的主要问题是读取x和y的代码在任何值之前运行

第二个问题是当你blur与idoutlet_actual_1控件你调用你的方法，但没有参数，当它期望actual和design作为参数传递。

最后，如果使用valueAsNumber，就不需要使用parseInt。如果你想使用它，那么读取value并确保使用parseInt(document.getElementById("outlet_actual_1" ).value, 10)

这样的基数最简单的方法是将读取x和y的代码移到方法内部并删除参数，但可能还有更多的事情要做，我怀疑你想在或字段更改时重新计算，所以让我们也添加:

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>

有许多进一步的改进可以做你的代码，我开始阅读关于addEventListener，而不是使用内联事件处理程序，如onblur