JavaScript 如何计算总月数？代码无法正常输出结果求调试

• 错误1：years和months已经是从输入值拆分出来的字符串类型变量，不是jQuery DOM对象，不需要也不能调用.val()方法，直接使用变量本身即可
• 错误2：#totalNumMonths是input输入框元素，不能用innerHTML赋值，需要使用value属性修改输入框内容
• 错误3：未做输入容错处理，当输入内容不含小数点、为空时，拆分得到的months为undefined，直接计算会抛出异常，需要加兜底判断
• 错误4：拆分得到的年、月都是字符串类型，最好显式转换为数字再计算，避免隐式转换导致的异常
• 额外注意：input的type设为number的情况下，部分浏览器会限制小数点后输入的内容合法性，如果你需要支持原生输入年.月格式，也可以把type改成text，再加输入格式校验

JS 代码 #

$(function() {
  $("#duration").keyup(function() {
    var input = document.getElementById('duration').value.trim();
    // 空输入默认返回0
    if (!input) {
      document.getElementById("totalNumMonths").value = 0;
      return;
    }
    var fields = input.split('.');
    // 转数字，无对应值时兜底为0
    var years = parseInt(fields[0]) || 0;
    var months = parseInt(fields[1] || 0) || 0;
    var result = years * 12 + months;
    document.getElementById("totalNumMonths").value = result;
  });
});

HTML 代码（可选优化） #

<html>
<body>
  <table>
    <tr>
      <td>Calculate Months</td>
      <td>
        <label>输入年数，格式为「年.月」，例如 11.6</label>
        <input class="form-control" name="duration" id="duration" value="" type="text" />
        <br/>
        <label>总月数</label>
        <input class="form-control" name="totalNumMonths" id="totalNumMonths" value="" type="number" readonly />
      </td>
    </tr>
  </table>
</body>
</html>

• 新增了空输入判断，避免空值计算异常
• 对年、月做了显式数字转换，无对应值时默认设为0
• 把赋值方式从innerHTML改成了value，适配input输入框的属性要求
• 移除了错误的.val()调用
• 可选修改输入框type为text，避免number类型对小数点后输入的限制，同时给结果输入框加了readonly属性，防止用户误改

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