Cannot find where nunber becomes NaN?

Question

I have a variable that holds the product of multiplication. The two variables that are the factors in this multiplication are numbers that I have verified as false with isNaN(). One variable is from a constant and the other one is from the user input.

I've tried using Number() and parseFloat() on this variable but neither helped.

I have included a conditional ternary in the div that holds the product so you can see if a number is returned or if the product is not a number.

Can someone tell me where the problem is and how to correct it?

I have replicated the problem in the included snippet.

const space_types = {
  option1: {
    space: 'Option 1',
    kwhuse: 9.4,
    kwhcost: 0.92,
    fueluse: 30.8,
    fuelcost: 0.21,
    othuse: 62.7,
    othcost: 1.17
  }
};

const calculate_utilities = {
  electric: {
    total_usage: 0,
    total_cost: 0
  },
  fuel: {
    total_usage: 0,
    total_cost: 0
  },
  electric1: {
    unit_rate: 0,
    unit_cost: 0,
    unit_usage: 0,
    total_usage: 0,
    total_cost: 0
  },
  fuel1: {
    unit_rate: 0,
    unit_cost: 0,
    unit_usage: 0,
    total_usage: 0,
    total_cost: 0
  }
};

$(function() {
  $("#area").trigger('focus');
  $("#area").blur(function() {
    var type = $("#space_type option:selected").val();
     var area = $("#area").val();
   alert("Is 'area' not a number? (JSFiddle returns FALSE) " + isNaN(area))
    calculate_utilities.electric1.unit_cost = space_types[type].kwhcost * area;
    calculate_utilities.electric.unit_cost = calculate_utilities.electric.unit_cost + calculate_utilities.electric1.unit_cost;
    $("#totals").html(
      isNaN(calculate_utilities.electric.unit_cost) ?
      "TRUE: This is not a number" :
      calculate_utilities.electric.unit_cost
    );
  });
});

.test {
  display: flex;
  flex-direction: column;
  width: 26%;
  line-height: 22px;
  font-size: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  Space Type:
  <select id="space_type" name="space_type">
    <option value=""></option>
    <option selected value="option1">Option 1</option>
  </select>
  Area:
  <input id="area" type="number" value="100000"> Totals:
  <div id="totals">0</div>
</div>

Answer 1

You are using a property in its own definition (adding a defined value with an undefined value results in NaN)

calculate_utilities.electric.unit_cost = calculate_utilities.electric.unit_cost + calculate_utilities.electric1.unit_cost;

Perhaps you have made an error there? Otherwise, you need to initialize that property when you first define calculate_utilities

const space_types = {
  option1: {
    space: 'Option 1',
    kwhuse: 9.4,
    kwhcost: 0.92,
    fueluse: 30.8,
    fuelcost: 0.21,
    othuse: 62.7,
    othcost: 1.17
  }
};

const calculate_utilities = {
  electric: {
    total_usage: 0,
    total_cost: 0,
    unit_cost: 0
  },
  fuel: {
    total_usage: 0,
    total_cost: 0
  },
  electric1: {
    unit_rate: 0,
    unit_cost: 0,
    unit_usage: 0,
    total_usage: 0,
    total_cost: 0
  },
  fuel1: {
    unit_rate: 0,
    unit_cost: 0,
    unit_usage: 0,
    total_usage: 0,
    total_cost: 0
  }
};

$(function() {
  $("#area").trigger('focus');
  $("#area").blur(function() {
    const type = $("#space_type option:selected").val();
    const area = Number($("#area").val());
    calculate_utilities.electric1.unit_cost = space_types[type].kwhcost * area;
    calculate_utilities.electric.unit_cost = calculate_utilities.electric.unit_cost + calculate_utilities.electric1.unit_cost;
    $("#totals").html(
      isNaN(calculate_utilities.electric.unit_cost) ?
      "TRUE: This is not a number" :
      calculate_utilities.electric.unit_cost
    );
  });
});

.test {
  display: flex;
  flex-direction: column;
  width: 26%;
  line-height: 22px;
  font-size: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  Space Type:
  <select id="space_type" name="space_type">
    <option value=""></option>
    <option selected value="option1">Option 1</option>
  </select>
  Area:
  <input id="area" type="number" value="100000"> Totals:
  <div id="totals">0</div>
</div>