JS金额计算时字符串拼接而非数值相加问题求助

Hey Anthony, let's sort out that issue where your total is coming out as a combined string instead of a summed number! The root problem here is that your #cost and #donation inputs return values with a $ symbol attached—so when you add them directly, JavaScript treats them as strings and concatenates them, not as numbers to add.

Here's the revised solution with clear explanations:

Updated HTML (no changes needed, included for context) #

<select class="custom-select d-block w-100" id="type" name="type" required>
  <!-- Assume your options have values formatted like "$30.00" -->
</select>
<input type="text" class="form-control" id="cost" name="cost" disabled>
<input type="text" class="form-control" id="donation" name="donation">
<input type="text" class="form-control" id="total" name="total" disabled>

Revised JavaScript #

$("#type").change(function(){
  var typevalue = $( "#type" ).val();
  $('input[name=cost]').val(typevalue);
});

$('#donation').keyup(function() {
  $(this).val(function(i,v) {
    // Clean input: remove any non-numeric/non-decimal chars, re-add $
    return '$' + v.replace(/[^0-9.]/g, '');
  });
});

$(document).ready(function(){
  $('#type').change(calculate);
  $('#donation').keyup(calculate);
});

function calculate(e) {
  // Extract numeric values by stripping $ and converting to float
  const costAmount = parseFloat($('#cost').val().replace('$', '')) || 0;
  const donationAmount = parseFloat($('#donation').val().replace('$', '')) || 0;
  
  // Calculate total and format back to proper currency
  const total = costAmount + donationAmount;
  $('#total').val(`$${total.toFixed(2)}`);
}

What changed and why: #

• Extracting numeric values: We use replace('$', '') to strip the dollar sign from both inputs, then parseFloat() to turn the remaining text into a number. The || 0 ensures empty inputs (like a blank donation field) are treated as 0 instead of causing NaN errors.
• Proper currency formatting: After summing the numbers, toFixed(2) guarantees we always have two decimal places (standard for currency), then we prepend the $ to get the final formatted string.
• Robust input cleaning: Updated the donation input regex to [^0-9.] to remove any accidental non-numeric characters, making the input handling more reliable.

This will give you the correct summed total (like $50.00) instead of the string concatenation you were seeing before!

内容的提问来源于stack exchange，提问作者Anthony