javascript - 将字符串转换为 int 时添加总值时出现问题

Question

我有两个选择字段，询问用户两个不同的问题，并根据所选值将总体值添加到最终总计中。我不完全理解为什么当我首先选择第二个选择字段时最终总计显示 $NaN USD，但如果我首先选择第一个选择字段，则它不会显示 $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>

我对 Javascript 还很陌生，所以感谢您的帮助，因为我已经研究这个问题一段时间了。

Answer 1

您没有为总计指定初始值，因此在顶部设置总计的值:var 总计 = 0;

相反，您没有得到 NaN 的原因是因为您使用了 Number(get)，如果为 null，它会为其赋予默认值 0。