Trouble adding total value while converting string to int

Question

I have two select fields that ask the user two different questions and adds the overall value to the final total depending on the selected value. I'm not fully understanding why the final total is saying $NaN USD when I select the second select field first but if I select the first select field first then it doesn't display $NaN USD.

var total;

$('.form-contro').on('change', function() {
  var get = $('#form-contro option:selected').val();
  total = Number(get);

  $('.text-center h2 span').html(total + " USD");
});


$('.form-contr').on('change', function() {
  var get = $('#form-contr option:selected').val();

  if (get === 'no') {
    total = 1000;
  } else if (get === 'yes') {
    total = total + 30;
  }

  $('.text-center h2 span').html(total + " USD");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="wrapper" style="margin-top: 20px; font-size: 12px; color: #888; font-family: 'Raleway', sans-serif;" for="states">Number of items:</label>
<select class="form-contro" id="form-contro" style="width: 320px; height: 40px; text-indent: 10px; display: block; margin: 0 auto; border-radius: 4px; border-style: solid; border-color: #343434;">
     <option value="90" id="items">1 Item</option>
     <option value="95.50" id="items">2 Items</option>
     <option value="100" id="items">3 Items</option>
     <option value="105" id="items">4 Item</option>
</select>

<label class="wrapper" style="margin-top: 20px; font-size: 12px; color: #888; font-family: 'Raleway', sans-serif;" for="states">Will you be flying?</label>
<select class="form-contr" id="form-contr" style="width: 320px; height: 40px; text-indent: 10px; display: block; margin: 0 auto; border-radius: 4px; border-style: solid; border-color: #343434;">
     <option value="no" id="items">No</option>
     <option value="yes" id="items">Yes</option>
</select>

<div class="text-center" style="clear: both;">
    <h2 style="margin-top: 40px;">Total amount $<span id="new_text">90 USD</span></h2>
</div>

I'm fairly new to Javascript so any help is appreciated since I've been working on this problem awhile.

My ultimate goal is to add the two select values together without getting the $NaN. — mur7ay
– mur7ay, Commented Aug 31, 2017 at 20:11

Bitz · Accepted Answer · 2017-08-31 20:17:56Z

3

You didn't give total an initial value, so at the top, make the value of total: var total = 0;

The reason you don't get NaN the other way around, is because you used Number(get), which gives it a default value of 0 if null.

edited Aug 31, 2017 at 20:17

answered Aug 31, 2017 at 20:15

Bitz

1,14813 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mur7ay Over a year ago

Wow, that was super easy.. Thanks!

Collectives™ on Stack Overflow

Trouble adding total value while converting string to int

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related