Question

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

2021-10-13

6267

javascript dom

几天前，我开始学习 DOM，并尝试克隆 Instagram 上的代码进行练习。此时，我收到此错误消息“未捕获 TypeError：无法读取 null 的属性（读取“vlaue”）”这是我的 DOM（JS 文件）

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 password = blabla.value

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

Answer 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>

Answer 2

当代码中有 querySelector 时，你应该使用标识符，因此：

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