title: Uncaught TypeError: Cannot read properties of null (reading 'vlaue')
body: <p>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 &quot;Uncaught TypeError: Cannot read properties of null (reading 'vlaue')&quot; This is my DOM(JS file)</p>
  <pre><code>const id = document.getElementById('text')
  const password = document.getElementById('password')
  
  document.addEventListener('keyup', function(e) {
          if(!id.value &amp;&amp; !password.value){                       
              let color = document.querySelector('login-btn');
              color.style.backgroundColor = &quot;#FF0000&quot;;
          }
  
      });
  </code></pre>
  <p>and this is my index.html code</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;title&gt;
          Westagram!
      &lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style/login.css&quot; type=&quot;text/css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style/common.css&quot; type=&quot;text/css&quot;&gt;
      &lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;js/login.js&quot;&gt; --&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- 아래 모든 div들을 포함하는 제일 상위 Container --&gt;
          &lt;div class=&quot;wrapper&quot;&gt;
              &lt;div class=&quot;logo&quot;&gt;
                  &lt;p class=&quot;westagram&quot;&gt;Westagram&lt;/p&gt;
              &lt;/div&gt;
      &lt;!-- 로그인 섹션 --&gt;
              &lt;div class=&quot;login-container&quot;&gt;
                  &lt;div class=&quot;id&quot;&gt;
                      &lt;input type=&quot;text&quot; id=&quot;text&quot; placeholder=&quot;Phone number, username, or email&quot; /&gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;pw&quot;&gt;
                      &lt;input type=&quot;password&quot; id=&quot;password&quot; placeholder=&quot;Password&quot;&gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;bt&quot;&gt;
                      &lt;button class=&quot;login-btn&quot;&gt;Log in
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;!-- 비밀번호 찾는 섹션 --&gt;
              &lt;div class=&quot;click&quot;&gt;
                  &lt;a class=&quot;find-password&quot;&gt;Forgot Password&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script src=&quot;js/login.js&quot;&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I tried const id = blabla.value
  password = blabla.value</p>
  <p>Also, I tried using &quot;querySelctor&quot; 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.</p>