仿写Instagram练习DOM时出现Uncaught TypeError报错如何解决？

错误原因 #

1. 类选择器语法错误：使用querySelector匹配类名时必须添加.前缀，你代码中的document.querySelector('login-btn')会尝试匹配<login-btn>标签，页面不存在该标签所以返回null，后续访问null.style时就会触发空值属性读取报错。
2. 拼写错误：报错信息中出现的vlaue是value的拼写错误，你可以检查实际运行的代码中是否存在把value误写为vlaue的情况。

修复方案 #

• 修正类选择器写法，匹配login-btn类时写为.login-btn
• 全局检查属性名拼写，确保输入框取值属性为正确的value
• 增加DOM元素存在性判断，避免因DOM未加载等问题导致的空值报错
• 不要在初始化时直接读取value，要存储DOM元素对象，事件触发时再读取最新的value

修复后完整JS代码 #

const id = document.getElementById('text')
const password = document.getElementById('password')
// 提前获取按钮元素，避免事件每次触发都重复查询DOM
const loginBtn = document.querySelector('.login-btn')

document.addEventListener('keyup', function(e) {
    // 容错判断：任意元素获取失败就不执行后续逻辑
    if (!id || !password || !loginBtn) return

    if(!id.value && !password.value){                       
        loginBtn.style.backgroundColor = "#FF0000";
    } else {
        // 输入内容后可恢复按钮默认样式，可根据你的样式需求修改
        loginBtn.style.backgroundColor = "#0095f6";
    }
});

额外说明 #

你之前尝试的const id = xxx.value写法逻辑会失效，因为这种写法只会在JS加载时读取一次输入框的初始值，后续用户输入内容不会更新这个变量的值，必须先存储DOM元素，事件触发时再读取.value才能拿到最新的输入内容。

你head中注释掉的JS引用是错误的用法（JS不能用link标签引入），但已经被注释不会影响运行，直接删除也可以。

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