I made a fiddle! https://jsfiddle.net/ajc100/vrzme0st/

I'm trying to make an insurance calculator (using fake numbers). It consists of a form with radio buttons and dropdowns and the value of each radio button or dropdown is a number. I used alert to show that the correct number is being applied based on what the user chooses. What I need to do now is add the numbers together to get a total. The problem I'm having is that I'm not sure how to convert the variable's value, which is a number, to an integer so that Javascript understands it as a number and can add it. This is my code. (Jquery actually). As you can see, I've tried a few different things to get the value of the variable to convert to a number but nothing seems to work. Any help is greatly appreciated.

 <ul>
  <li><form id="sex"><legend>Sex</legend> <fieldset>
  <input type="radio" name="sex" value="20" id="Female" class="firstInput css-checkbox" />
  <label class="css-label" for="Female">Female</label>
     <input type="radio" name="sex" value="30" id="Male" class="css-checkbox" />
     <label class="css-label" for="Male">Male</label></fieldset>
      </form>
      </li>

  <li>
  <form id="age"><legend>Age</legend><fieldset>
    <input type="radio" id="sixteen" name="age" value="40" class="firstInput css-checkbox" />
    <label class="css-label" for="sixteen">16-25</label>
      <input id="twentysix" type="radio" name="age" value="30" class="css-checkbox" />
      <label class="css-label" for="twentysix">26-34</label>
        <input type="radio" id="thirtyfive" name="age" value="20" class="css-checkbox"  />
        <label class="css-label" for="thirtyfive">35-50</label>
          <input type="radio" name="age" id="fifty" value="15" class="css-checkbox" />
          <label class="css-label" for="fifty">50+</label></fieldset>
          </form>
          </li>

  <li>Car Color
    <select name="color" id="car">
      <option value="80">red</option>
      <option value="50">silver</option>
      <option value="50">black</option>
      <option value="30">white</option>
      <option value="50">other</option>
    </select>
  </li>

  <li>Car Year
    <select name="year" id="year">
      <option value="60">2015+</option>
      <option value="40">2000 - 2015</option>
      <option value="60">1999 or before </option>

    </select></li>

    <li>Citations in past year
      <select name="citations" id="citations">
        <option value="20">1</option>
        <option value="30">2</option>
        <option value="40">3+</option>

      </select>

    </li>
  </ul>

  <hr>
  <div class="total">Total</div>

</div>

<script>

  $('#sex input').on('change', function() {
   var sex = ($('input[name="sex"]:checked', '#sex').val());
   parseInt(sex);
   alert(sex);
 });

  $('#age input').on('change', function() {
   var age = ($('input[name="age"]:checked', '#age').val());
   number(age);
   alert(age);
 });

  $('#car').on('change', function() {
   var car = parseInt($('#car').val(),10);
   alert(car);
 });

  $('#year').on('change', function() {
   var year = +($('#year').val());
   alert(year);
 });

  $('#citations').on('change', function() {
   var citations = ($('#citations').val());
   parseInt(citations);
   alert(citations);
 });

I tried this and it's still not working. I can't seem to add the variables together even after switching them to numbers:

<script>
$(document).ready(function() {

  $('#sex input').on('change', function() {
    sex = ($('input[name="sex"]:checked', '#sex').val());
    sex = +sex;
  });

  $('#age input').on('change', function() {
    age = ($('input[name="age"]:checked', '#age').val());
    age = +age;
  });

  $('#car').on('change', function() {
    car = ($('#car').val());
    car = +car;
  });

  $('#year').on('change', function() {
    year = ($('#year').val());
    year = +year;
  });

  $('#citations').on('change', function() {
    citations = ($('#citations').val());
    citations = +citations;
  });

  var total = sex + age + car + year + citations;
  $(".total").text("Total: " + total);

});

</script>

parseInt and Number are functions that return the numerical value. They don't change the argument.

So write:

sex = parseInt(sex);

or:

age = number(age);

But much simpler and most efficient is the unitary plus:

age = +age;

You don't show code where you add variable values, but after you have converted them like this you can add them as expected.

Order of events and automatically created variables

The problem with your code is that you calculate the total when the page loads, at a time when none of the variables is set by the click handlers (sex, age, ...). Instead they are set by the rule that browsers automatically create a variable for each element that has an "id" attribute, with that name. But those variables represent DOM elements, and so your total cannot work. Also that total never gets updated when the user changes a selection.

Instead I suggest using this code:

function refreshTotal() {
    var sex = +$('input[name="sex"]:checked', '#sex').val();
    var age = +$('input[name="age"]:checked', '#age').val();
    var car = +$('#car').val();
    var year = +$('#year').val();
    var citations = +$('#citations').val();
    var total = sex + age + car + year + citations;
    $(".total").text("Total: " + total);
}

// Create one handler for all input/select changes:
$('input,select').on('change', refreshTotal);

// Also at page load, calculate the total
$(refreshTotal);

more