Javascript/jQuery +=运算返回NaN而非数值的异常问题咨询

问题原因 #

1. 选择器范围错误 #

你代码中使用的$("input, select")是全局选择器，会选中页面内所有输入框和下拉框，包含外层的<select id="courses">下拉元素。这个下拉的默认选中项value是空字符串，parseInt("")会返回NaN，而你对select的判断条件是if ($(el).val() !== "0")，空字符串满足该条件，就会执行total += NaN，最终total的结果自然是NaN。
你去掉加号直接赋值的时候，刚好最后一次遍历到的元素是值为200的选中复选框，直接覆盖了之前的NaN值，所以能得到正确结果。

2. load调用逻辑错误 #

你连续两次调用了$('#targetPane').load方法，第二次调用时传入的是字符串'path'而非你之前定义的path变量，相当于尝试请求一个名为path的不存在的资源，可能导致DOM加载内容不符合预期。

修复方案 #

1. 限定选择器范围，只匹配加载到#targetPane容器内的元素，避免命中外层的下拉框：
   将遍历代码

$("input, select").each(function(i, el) {

修改为：

$("#targetPane input, #targetPane select").each(function(i, el) {

2. 修正load调用逻辑，删除多余的第一次load调用，修正变量引用：
   将原有代码

$('#targetPane').load(e.target.value);
path = (e.target.value);
//open callback function
$('#targetPane').load('path', function() {

修改为：

const path = e.target.value;
$('#targetPane').load(path, function() {

3. 增加数值转换容错处理，避免异常值导致total变为NaN，同时给parseInt指定进制参数10，避免非十进制字符串解析异常：
   将所有parseInt($(el).val())修改为parseInt($(el).val(), 10) || 0，如果转换失败默认加0，不会影响total的计算结果。

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