HTML div清除输入后未隐藏的表单条件显示JavaScript问题

核心错误点 #

• 使用了错误的CSS属性值：display属性没有hidden这个有效值，隐藏元素需要用display: none，hidden是visibility属性的可选值，两者混用导致隐藏逻辑不生效。
• 原有条件判断遗漏了输入值为0的处理分支，只判断了输入为空的场景，输入0时没有命中任何判断分支，区块不会执行隐藏逻辑。

修正后代码 #

function showFormSection() {
    const busmiles = document.getElementById('weeklybus').value;
    const busmode = document.getElementById('busmodeform');
    const extralinebreak = document.getElementById('oppositeform');
    if (busmiles !== "" && busmiles !== "0") {
        busmode.style.display = 'block';
        extralinebreak.style.display = 'none';
    } else {
        busmode.style.display = 'none';
        extralinebreak.style.display = 'block';
    }
}

// 事件绑定到对应输入框，减少不必要的触发
document.getElementById('weeklybus').addEventListener('input', showFormSection);
// 页面初始化时执行一次，适配初始有默认值的场景
showFormSection();

修改后即可实现预期效果：输入非0数字时显示busmodeform区块，清空输入或者输入0时自动隐藏该区块。

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