parseInt() 的问题

Question

当我尝试将数字传递给函数参数时，我似乎无法弄清楚为什么 parseInt() 在我的代码中无法正常工作。它似乎在我的数组和函数 return 值中不断出现 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 的代码移到方法中并删除参数，但可能不止于此，我怀疑你想要在任何时候重新计算 either 字段更改，所以让我们也添加它：

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

这样的内联事件处理程序

parseInt() 的问题

Problems with pasrseInt()

javascript

arrays

function

nan

parseint