title: Warning message when caps lock is on while entering password is not working and also initial scale is not recognized in google chrome only
body: <p>I am using a JavaScript function to check if caps lock is on and on the console window I get "Uncaught TypeError: Cannot read property 'addEventListener' of null
      at login.js:41"   </p>
  
  <p>In google chrome's console window I also get an error 
  "The key "intial-scale" is not recognized and ignored"</p>
  
  <p>I tried searching for the causes of this problem and I saw people saying that this may be because the function is executed before the DOM runs so I tried adding window.onload before the function but it didn't fix the issue.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// array of objects to store adminstrators data 
  var usersObj =[
      {
          username: "karim",
          password: "karim2019"
      },
  
      {    
          username: "nourhan",
          password: "noura2019"
      },
  
      {
          username: "nariman",
         password: "nariman2019"
      }
  ]
  
  // function to authenticate login information and proceed to the next page 
  function getLoginInfo()
  {
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
  
      for(i = 0; i &lt; usersObj.length; i++)
      {
          if(username == usersObj[i].username &amp;&amp; password == usersObj[i].password)
          {
              alert("Login successful..");
              document.getElementById("loginf").action = "dashboard.html";
              return
          }
      }
      alert("Username or password is incorrect!");
      document.getElementById("loginf").action = "login.htm";
  }
  
  var input = document.getElementById("password");
  
  var text = document.getElementById("text");
  input.addEventListener("keyup", window.onload=function(event)
  {
      if (event.getModifierState("CapsLock"))
      {
          text.style.visibility = "visible";
      } 
        else
      {
          text.style.visibility = "hidden"
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
      margin-top: 5%;
  }
  /* Bordered form */
  form {
      margin-top: 20%;
    }
  
    /* Full-width inputs */
  input[type=text], input[type=password] {
      width: 100%;
      padding: 1% 2%;
      margin: 1%;
      display: inline-block;
      border: 1px solid black;
      box-sizing: border-box;
    }
   p{
     display: none;
   }
    /* Set a style for all buttons */
  button {
      background-color: #4CAF50;
      color: white;
      padding: 1% 2%;
      margin: 1%;
      border: none;
      cursor: pointer;
      width: 100%;
    }
  
    /* Add a hover effect for buttons */
  button:hover {
      opacity: 0.8;
    }
  
    /* Add padding to containers */
  .container {
      padding: 1.5%;
    }
  
    /* The "Forgot password" text */
  span.psw {
      float: right;
      padding-top: 1.5%;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, intial-scale=1 maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/&gt; 
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="loginstyles.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="login.js"&gt;&lt;/script&gt;
      &lt;body&gt;
          &lt;div class="row"&gt;
              &lt;div class="col"&gt;&lt;/div&gt;
              
              &lt;div class="col"&gt;
                  &lt;form  id = "loginf" name="loginf" method="POST"&gt;
                      &lt;div&gt;
                          &lt;h1&gt;Account Login&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div&gt;&lt;hr&gt;&lt;/div&gt;
  
                      &lt;div class="container"&gt;
                          &lt;label for="username"&gt;&lt;b&gt;Username&lt;/b&gt;&lt;/label&gt;
                          &lt;input id="username" type="text" placeholder="Enter Username" name="username" required&gt;
                      
  
                          &lt;label for="password"&gt;&lt;b&gt;Password&lt;/b&gt;&lt;/label&gt;
                          &lt;input id="password" type="password" placeholder="Enter Password" name="password" required&gt;
                          &lt;p id="text"&gt;WARNING!Caps Lock is ON.&lt;/p&gt;
                          
                          
  
                          
                          &lt;label&gt;
                              &lt;input type="checkbox" checked="checked" name="remember"&gt;Remember me
                          &lt;/label&gt;
                          &lt;span class="psw"&gt;&lt;a href="#"&gt;Forgot Password?&lt;/a&gt;&lt;/span&gt;
                          &lt;button onclick="getLoginInfo()" type="submit"&gt;Login&lt;/button&gt;
                      &lt;/div&gt;
                      
                     
                          
                  &lt;/form&gt;
              &lt;/div&gt;
  
              &lt;div class="col"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>