JS监听input的change事件时if else的else分支无法触发问题求助

核心错误原因 #

你代码中的if判断逻辑存在对象使用错误：

• 你声明的newInput是通过document.querySelector('input')获取到的DOM元素对象，而非输入框的内容值。任何非空对象和空字符串做不等于判断时，结果永远为true，所以else分支永远不会触发。
• 你修改条件为if (newInput === '某值')时逻辑异常，本质是拿DOM对象和字符串做全等判断，结果永远为false，后续执行到h1.innerText = 'Welcome ' + newInput.value时逻辑才看似生效，本质是条件判断完全失效。

修复方案 #

1. 修正判断条件 #

将if判断的对象改为输入框的value属性，判断输入内容是否为空。

2. 可选优化：替换监听事件 #

change事件仅在输入框失焦时触发，如果你需要输入内容实时同步更新h1内容，可以将事件改为input。

修正后完整JS代码 #

const newInput = document.querySelector('input');
const h1 = document.querySelector('h1');

// 替换为input事件可实现实时更新，保留change则保持原有失焦才触发的逻辑
newInput.addEventListener('input', function(){
    if (newInput.value.trim() !== ''){
        h1.innerText = 'Welcome ' + newInput.value
    } else {
        h1.innerText = 'Enter Your Username';
    }
});

补充：判断时增加trim()可以过滤用户输入的纯空格内容，避免全空格时误判为有效输入。

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