Uncaught TypeError: Cannot read properties of null (reading 'vlaue')-CodePudding

A few days ago, I started studying DOM and I tried to clone the code the Instagram for practicing. At this moment, I got this error message "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";
        }

    });

and this is my index.html code

<!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 >
            <div >
                <p >Westagram</p>
            </div>
    <!-- 로그인 섹션 -->
            <div >
                <div >
                    <input type="text" id="text" placeholder="Phone number, username, or email" />
                </div>

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

                <div >
                    <button >Log in
                    </button>
                </div>
            </div>
    <!-- 비밀번호 찾는 섹션 -->
            <div >
                <a >Forgot Password</a>
            </div>
        </div>

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

I tried const id = blabla.value password = blabla.value

Also, I tried using "querySelctor" all of them but still have same issue. Could you help me out this error? I really appreciate it! I struggling with this whole day... Thank you for helping me out in advance.

CodePudding user response：

I've added an else block, hope you won't mind, it's meant to make the difference. If you are using querySelector you must add the . class symbol, before login-btn like that .login-btn Additionally - you do not close the body tag. If you set JavaScript in the head tag, you need to use the script tag for that, not link tag. For example, like <script src = "script.js" defer> </script> Now It's should works fine, Best regards !

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>