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

Question

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

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.

Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, Oct 13 '21 at 11:20
Your selection of the current answer makes no sense. The error points to `value`, but the answer would only explain an error regarding `style`. — Heretic Monkey, Oct 13 '21 at 15:33

MarioG8 · Accepted Answer · 2021-10-13T11:42:49.677

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>

It only works in the snippet because the snippet automatically puts the JavaScript after the HTML when running the snippet. The OP has the code reference in the `head`. — Heretic Monkey, Oct 13 '21 at 11:22

score 0 · Answer 2 · edited Dec 03 '21 at 13:22

0

you should use identifiers when querySelector is in your code so:

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

edited Dec 03 '21 at 13:22

lin

1,425
1
19
27

answered Dec 03 '21 at 09:14

sarah-bayry

1
1

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

2 Answers2