为何触发函数时输入框值未更新？秒单位转换器开发问题

问题根源 #

1. 静态计算导致结果不更新：页面加载时你就初始化了array，此时输入框是空值，计算出的second/minute等都是NaN或0，而且后续用户输入内容时，这个数组不会重新计算，所以永远拿不到最新的转换结果。
2. 输入框本身可以正常输入内容，你感知到的“值未变化”实际是转换结果没有正确更新，而非输入框失效。

修正后的代码 #

HTML部分（无需修改） #

<body>
    <select class="select">
        <option value="second">second</option>
        <option value="minute">minute</option>
        <option value="hour">hour</option>
        <option value="day">day</option>
    </select>
    <input class="inp" type="text">
    <p class="p"></p>
    <script src="Untitled-1.js"></script>
</body>

JavaScript部分 #

let select = document.querySelector(".select")
let userAmountInput = document.querySelector(".inp")
let p = document.querySelector(".p")

function updateP(e) {
    if (e.key === "Enter") {
        // 获取输入的秒数并转为数字
        const seconds = Number(userAmountInput.value);
        // 处理非数字输入
        if (isNaN(seconds)) {
            p.innerHTML = "请输入有效数字";
            return;
        }
        // 根据选择的单位实时计算结果
        let result;
        switch(select.value) {
            case "second":
                result = seconds;
                break;
            case "minute":
                result = seconds / 60;
                break;
            case "hour":
                result = seconds / 3600;
                break;
            case "day":
                result = seconds / 86400;
                break;
        }
        // 保留两位小数显示结果，提升可读性
        p.innerHTML = result.toFixed(2);
    }
}
userAmountInput.addEventListener("keyup", updateP)

额外优化建议 #

• 把输入框类型改为number，从源头避免非数字输入：<input class="inp" type="number">
• 监听选择框的change事件，输入后切换单位时自动更新结果，无需再次按回车。

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