Problems with pasrseInt()

Question

I cant seem to work out why parseInt() is not working properly in my code when I try to pass numbers through to my function parameters. It seems to keep coming up with NaN both in my array and the function return value.

What I am trying to do is when values are keyed into the input fields the index percentage of these two values appears in the HTML and stores the value in an array. I am using a function for this because I want to have over twenty outlet calculations. I am also struggling with refactoring this code as I don't have a lot of experience with JS. Any help would be really 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>

Answer 1

The main problem here is the code that reads x and y runs before any valuie is in them.

The second problem is when you blur the control with id outlet_actual_1 you call your method, but with no arguments, when it expects actual and design to be passed in as arguments.

Finally if using valueAsNumber there's no need to use parseInt. If you do want to use it then read the value and make sure you use the radix like parseInt(document.getElementById("outlet_actual_1" ).value, 10)

The simple way to get this going is to move the code that reads x and y inside the method and remove the arguments, but there's probably more to it than that, I suspect you want to recalculate any time either field changes so lets add that too:

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>

There are many further improvements that can be made to your code, I'd start off reading about addEventListener rather than using inline event handlers like onblur