JavaScript：如何计算带分隔符的年月输入对应的总月数并调试代码

代码问题诊断 #

• 未引入jQuery依赖：原代码使用了jQuery的$选择器和事件绑定语法，但页面没有引入jQuery库，运行时会直接报$ is not defined错误。
• 方法调用错误：years和months是从输入框取值拆分出的字符串，不是DOM或jQuery对象，调用.val()方法属于非法调用，会触发报错。
• 赋值属性错误：totalNumMonths是input输入框元素，不能用innerHTML设置内容，需要修改其value属性才能生效。
• 类型转换缺失：拆分出的年、月都是字符串类型，直接参与运算会出现字符串拼接等非预期结果，需要先转成数值类型。
• 边界情况未处理：当用户未输入小数点、或者只输入了整数部分时，拆分后的fields[1]为undefined，直接运算会返回NaN，需要做兼容处理。

修复后完整代码 #

<html>
 <body>
  <table>
   <tr>
    <td>Calculate Months</td>
    <td>
    <label>Input Years in the format (year.month e.g. 11.6)</label>
    <input class="form-control" name="duration" id="duration" value="" type="text"/>
    <br/>
    <label>Total Months</label>
    <input class="form-control" name="totalNumMonths" id="totalNumMonths" value="" type="number" readonly/>
    </td>
   </tr>
  </table>
 </body>
 <script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('duration').addEventListener('keyup', function () {
        const input = this.value.trim();
        if (!input) {
            document.getElementById('totalNumMonths').value = '';
            return;
        }
        const fields = input.split('.');
        const years = parseInt(fields[0]) || 0;
        const months = parseInt(fields[1] || 0) || 0;
        // 可选：添加月份合法性校验，超过12的话可以做进位处理
        // if (months >= 12) {
        //     years += Math.floor(months / 12);
        //     months = months % 12;
        // }
        const result = years * 12 + months;
        document.getElementById('totalNumMonths').value = result;
    });
});
 </script>
</html>

修复说明 #

• 移除了jQuery依赖，全部改为原生JS实现，无需引入外部资源即可运行。
• 把duration输入框类型改为text，避免部分浏览器number输入框对小数点输入的限制。
• 给totalNumMonths添加了readonly属性，避免用户手动修改计算结果。
• 增加了空输入、无小数部分的兼容处理，不会出现NaN报错。
• 可选添加了月份合法性校验逻辑，需要的话可以放开注释使用。

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