未捕获的类型错误：无法读取 null 的属性（读取“值”）答案

【问题标题】：Uncaught TypeError: Cannot read properties of null (reading 'vlaue')未捕获的类型错误：无法读取 null 的属性（读取“值”）
【发布时间】：2021-12-01 20:24:01
【问题描述】：

几天前，我开始学习 DOM，并尝试在 Instagram 上克隆代码进行练习。此时，我收到此错误消息“Uncaught TypeError: Cannot read properties of null (reading 'vlaue')” This is my DOM(JS file)

const id = document.getElementById('text')
const password = document.getElementById('password')

document.addEventListener('keyup', function(e) {
        if(!id.value && !password.value){                       
            let color = document.querySelector('login-btn');
            color.style.backgroundColor = "#FF0000";
        }

    });

这是我的 index.html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        Westagram!
    </title>
    <link rel="stylesheet" href="style/login.css" type="text/css">
    <link rel="stylesheet" href="style/common.css" type="text/css">
    <!-- <link rel="stylesheet" href="js/login.js"> -->
</head>
<body>
    <!-- 아래 모든 div들을 포함하는 제일 상위 Container -->
        <div class="wrapper">
            <div class="logo">
                <p class="westagram">Westagram</p>
            </div>
    <!-- 로그인 섹션 -->
            <div class="login-container">
                <div class="id">
                    <input type="text" id="text" placeholder="Phone number, username, or email" />
                </div>

                <div class="pw">
                    <input type="password" id="password" placeholder="Password">
                </div>

                <div class="bt">
                    <button class="login-btn">Log in
                    </button>
                </div>
            </div>
    <!-- 비밀번호 찾는 섹션 -->
            <div class="click">
                <a class="find-password">Forgot Password</a>
            </div>
        </div>

        <script src="js/login.js"></script>
</html>

我试过 const id = blabla.value 密码 = blabla.value

另外，我尝试使用“querySelctor”所有这些，但仍然有同样的问题。你能帮我解决这个错误吗？对此，我真的非常感激！我整天都在挣扎... 感谢您提前帮助我。

【问题讨论】：

这能回答你的问题吗？ Why does jQuery or a DOM method such as getElementById not find the element?
您对当前答案的选择毫无意义。错误指向value，但答案只会解释有关style 的错误。

标签： javascript dom

【解决方案1】：

我已经添加了一个 else 块，希望您不会介意，这是为了有所作为。如果您使用的是querySelector，则必须在login-btn 之前添加. class 符号，如.login-btn 此外 - 您不要关闭body 标签。如果您在 head 标签中设置 JavaScript，则需要为此使用 script 标签，而不是 link 标签。比如<script src = "script.js" defer> </script> 现在应该可以正常工作了，最好的问候！

const id = document.getElementById("text");
const password = document.getElementById("password");

document.addEventListener("keydown", function (e) {
  if (!id.value && !password.value) {
    let color = document.querySelector(".login-btn");
    color.style.backgroundColor = "#FF0000";
  } else {
    let color = document.querySelector(".login-btn");
    color.style.backgroundColor = "#008000";
  }
});

<body>
    <div class="wrapper">
      <div class="logo">
        <p class="westagram">Westagram</p>
      </div>

      <div class="login-container">
        <div class="id">
          <input
            type="text"
            id="text"
            placeholder="Phone number, username, or email"
          />
        </div>

        <div class="pw">
          <input type="password" id="password" placeholder="Password" />
        </div>

        <div class="bt">
          <button class="login-btn">Log in</button>
        </div>
      </div>
      <div class="click">
        <a class="find-password">Forgot Password</a>
      </div>
    </div>

    <script src="js/login.js"></script>
  </body>

【讨论】：

它只在 sn-p 中有效，因为 sn-p 在运行 sn-p 时会自动将 JavaScript 放在 HTML 之后。 OP 在head 中有代码参考。
你的意思是这个代码吗？ :-D ?

【解决方案2】：

当 querySelector 在您的代码中时，您应该使用标识符：

let color = document.querySelector('.login-btn');

【讨论】：