passrseInt() 的问题[关闭]

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 带有 id outlet_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 这样的内联事件处理程序