如何用JavaScript根据宠物重量动态更新HTML表单犬舍尺寸

问题说明 #

我做了一个HTML表单，想要实现用户输入宠物重量后自动显示对应的犬舍尺寸，但现在只有页面刷新时会显示“mini”，后续输入重量时尺寸完全没变化。我知道要给重量输入框加事件处理，但不知道具体怎么弄，附上我的原代码：

原JavaScript代码

window.addEventListener("load", getKennelSize);
var petForm = document.getElementsByTagName("form");
var petSize;
function getKennelSize() {
    var petWeight = document.getElementById("weight").value;
    if (petWeight === NaN) {
        petSize = " ";
    } else if (petWeight <= 4) {
        petSize = "mini";
    } else if (petWeight >= 4 && petWeight <= 12) {
        petSize = "small";
    } else if (petWeight > 12 && petWeight <= 50) {
        petSize = "medium";
    } else {
        petWeight > 50;
        petSize = "large";
    }
    document.getElementById("size").value = petSize;
}
document.getElementById("size").value = petSize;

原HTML表单

<p>
    <label for="weight">Weight of pet?</label>
    <input type="text" name="weight" id="weight" class="quantity" />
    <label for="size">Kennel size</label>
    <input type="text" name="size" id="size" class="cost" readonly>
</p>

问题分析与修复方案 #

原代码有两个核心问题：缺少实时触发的事件绑定，以及重量判断逻辑存在错误，修复后的代码如下：

修复后的JavaScript代码

// 页面加载时初始化尺寸
window.addEventListener("load", getKennelSize);

// 获取重量输入框，绑定实时触发事件
const weightInput = document.getElementById("weight");
weightInput.addEventListener("input", getKennelSize); // 输入时实时响应
weightInput.addEventListener("change", getKennelSize); // 兼容失焦场景

function getKennelSize() {
    // 把输入的字符串转为数字，无效输入转为NaN
    const petWeight = parseFloat(document.getElementById("weight").value);
    let petSize = "";

    // 正确判断是否为有效数字
    if (isNaN(petWeight)) {
        petSize = "";
    } else if (petWeight <= 4) {
        petSize = "mini";
    } else if (petWeight <= 12) { // 去掉重叠判断，前面已排除<=4的情况
        petSize = "small";
    } else if (petWeight <= 50) { // 同理简化边界判断
        petSize = "medium";
    } else {
        petSize = "large";
    }

    document.getElementById("size").value = petSize;
}

修复后的HTML（无需修改结构，可按需调整中文文案）

<p>
    <label for="weight">宠物重量？</label>
    <input type="text" name="weight" id="weight" class="quantity" />
    <label for="size">犬舍尺寸</label>
    <input type="text" name="size" id="size" class="cost" readonly>
</p>

关键修复点说明 #

• 事件绑定：给重量输入框添加input事件，用户每输入一个字符都会触发尺寸计算；补充change事件兼容粘贴、下拉选择等非实时输入场景。
• 类型转换：用parseFloat将输入的字符串转为数字，确保数值比较逻辑有效。
• NaN判断：用isNaN()判断输入是否为有效数字，=== NaN永远不成立，因为NaN和任何值都不相等。
• 条件简化：移除重叠的边界判断（如>=4），利用条件执行顺序简化逻辑，避免冗余判断。
• 冗余代码移除：删掉原代码末尾多余的尺寸赋值，页面加载时的load事件已完成初始值设置。

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