When trying to call a function in JavaScript I get the error: Cannot read properties of undefined (reading 'target')

Question

I posted earlier but I'm stuck again. I'm a beginner so excuse my ignorance please and if I explain some things a bit weird. I tried to give as much information as possible though.

Goal: I've written a bunch of calculations that all needs to come together and calculate the cost of a solar power system

Expected result: The system cost field needs to get a value based on the existing calculations

Actual results: System Cost shows 0. Also, some of the other values that should feed into the Sytem Cost number is showing 0 as well in console.

Error messages: Cannot read properties of undefined (reading 'target')

What I've tried: I think it's a scoping problem because when I moved some of the other calculations into functions with other calculations I get the right values on the console for those values. But when I do that the function that calculates system cost can't read those values because now they are in other functions (I'll give example shortly)

I think the variables that are needed are globally declared but that didn't fix it. I've also tried to call the function but then I get this error: Cannot read properties of undefined (reading 'target'). At the moment I have that with no parameters but I have tried with the parameters that is in the function declaration as well as using the variable I want to get out of the function but got similar errors.

Here's a section of the html:

Approximate percentage of monthly bill you 
would like to save: 
<input 
       type="text" 
       min="1" 
       max="100" 
       value="0" 
       step="1" 
       onchange="CalcKwhSavings(event)" 
       style="width:400px;"
       id="inputSaveOnBill"
       />
<h2>Required Kwh Savings Per Month <span id="outputKwhSavings"></span></h2>

Here's the variables and function I'm using to get the result:

let outputKwhSavings = document.getElementById('outputKwhSavings');
let inputSaveOnBill = document.getElementById('inputSaveOnBill');
var reqKwhSavingsPerMonth = 0;

function CalcKwhSavings(event) {
   inputSaveOnBill = event.target.value;
    inputSaveOnBill.innerHTML = inputSaveOnBill ;
    
    reqKwhSavingsPerMonth = Math.round ((inputSaveOnBill * .01)* monthlyBillToKwhConversion);
  
    outputKwhSavings.innerHTML = reqKwhSavingsPerMonth;
    console.log("reqKwhSavingsPerMonth:" + reqKwhSavingsPerMonth);

}

Here's some other variables that are dependent on the values in the above function (These function are showing 0 in the console which they shouldn't be doing):

let numberOfPanels = Math.round (reqKwhSavingsPerMonth / kwhPerPanelPerMonth);
console.log("numberOfPanels:" + numberOfPanels);

let sizeOfPanelArray = Math.round (numberOfPanels * panelPeakPower / 1000);
console.log("sizeOfPanelArray:" + sizeOfPanelArray);

And here's the function that needs the above variables (amongst others) to get to the the system cost result (I'm also not sure whether the below is written correctly to get the values from the radio buttons but I thought I'd start with trying to resolve the scoping problem):

function calcSystemCost(event) {
    let singlePhase = document.getElementById("singlePhase").value;
        let threePhase = document.getElementById("threePhase").value;
    let systemCost = 0;
    let phase = 0;

        if ([phase.singlePhase].checked == true) {
      if (sizeOfPanelArray > 6.5) {systemCost = Math.round ((singlePhaseBaseCost + eightKwSinglePhaseInverter) + (numberOfPanels * panelCost) + (numberOfBatteries * batteryCost))
}
else if (sizeOfPanelArray < 6.5) {
   systemCost = Math.round ((singlePhaseBaseCost + fiveKwSinglePhaseInverter) + (numberOfPanels * panelCost) + (numberOfBatteries * batteryCost))
}
console.log("System cost:" + systemCost); 

        }

        else if ([phase.threePhase].checked == true) {

        systemCost = Math.round ((threePhaseBaseCost + twelveKwThreePhaseInverter) + (numberOfPanels * panelCost) + (numberOfBatteries * batteryCost))
console.log("sytemCost:" + systemCost);
        }
  
  outputSystemCost.innerHTML = systemCost;
  

        }

And here's the codepen with everything in

Any help would be very much appreciated. I've watched so many videos and read on so many places on how to handle scoping but I'm not getting anything to work.