Javascript Arrays. Pushing a calculated value to an array returns undefined

Question

I've created a form that requires numerical values to be entered into it which are then calculated and populated into another form. The calculated output then needs to be added to an array for reference later in the session.

All of the data in the processOrder function successfully gets pushed to their respective arrays but once I try to push any of the data that has been calculated rather than simply input, undefined is not a function is returned.

Any help much appreciated.

HTML

<form>
<fieldset>
Units:<input type="number" value="" id="formUnits">   
Kms:<input type="number" value="" id="formKms">   
<input type=button value='Submit Order' onClick='calculate()'>
</fieldset>
</form>

<form>
<fieldset>
Per Unit Costs: <input type="number" id="perUnitCost">
Delivery Charges: <input type="number" id="deliveryCharge">
Pre Tax Total: <input type="number" id="preTaxTotal">
</fieldset>
</form>

JAVASCRIPT

var units = new Array();
var kms = new Array();
var timeStamp = new Array();

var unitCost = new Array();
var delivery  = new Array(); 
var preTax  = new Array();

function calculate(){           
var units = document.getElementById("formUnits").value;           
var kms = document.getElementById("formKms").value;     

if ( units >= 1 && units <= 50 ) 
{
unitCost = 11.1 * units 
} 

if ( kms >= 1 && kms <= 20 ) 
{
delivery = 20
} 

var preTax = unitCost + delivery; 
document.getElementById("perUnitCost").value = unitCost.toFixed(2);   
document.getElementById("deliveryCharge").value = delivery;  
document.getElementById("preTaxTotal").value = preTax.toFixed(2);   

processOrder()

} 

function processOrder(){

units.push(document.getElementById('formUnits').value); 
document.getElementById('formUnits').value=''; 
kms.push(document.getElementById('formKms').value); 
document.getElementById('formKms').value=''; 
timeStamp.push(Date()).value;

add_calcs_to_array()
}

function add_calcs_to_array(){

unitCost.push(document.getElementById('perUnitCost').value); 
document.getElementById('perUnitCost').value='';
delivery.push(document.getElementById('deliveryCharge').value); 
document.getElementById('deliveryCharge').value=''; 
preTax.push(document.getElementById('preTaxTotal').value); 
document.getElementById('preTaxTotal').value=''; 

}

Answer 1

The problem I see is that your variables should be initialized as var in calculate to occult the globals. Like so:

// This is a global variable.
Var unitCost = [];

function calculate(units) {
  // The var unitCost here occult the global unitCost variable.
  // This means that this unitCost is local to the function.
  var unitCost = 0;
  if (units) {
    unitCost = units * 11.1;
  }
}

calculate(2);
console.log(unitCost); // Still []. Without var in calculate, it would be a 22.2.