时间戳

首页 > 解决方案 > 未捕获的 TypeError：无法读取 null 错误 javascript 的属性“样式”

javascript - 未捕获的 TypeError：无法读取 null 错误 javascript 的属性“样式”

问题描述

当我打开我的网站 index.html 并进入控制台时，我收到此错误：未捕获的类型错误：无法在 index-login.js:22 处读取 null 的属性“样式”

我已经阅读了这个问题，但它仍然不起作用。

var keyRequireBoolean0 = keyInput.includes('anon')
if (keyRequireBoolean0 == true) {
    var keyRequireBoolean1 = keyInput.includes('sup')
    if (keyRequireBoolean1 == true) {
        document.getElementById("validKeyText").style.visibility = "visible";
    } else {
        document.getElementById("invalidKeyText").style.visibility = "visible";
    }
} else {
    document.getElementById("invalidKeyText").style.visibility = "visible";
}}

console.log('Defined Function')
document.getElementById('validKeyText').style.visibility="collapse"; 
      // here i get this error: Uncaught TypeError: Cannot read property 'style' of null at index-login.js:22
document.getElementById('invalidKeyText').style.visibility="collapse";

下面的 HTML 部分

  <form class="box" action="index.html" method="post">
  <h1>Enter You Key Below</h1>
  <input type="password" id="keyInputBox" placeholder="Key">
  <input type="submit" onclick="validate()" value="Check">
  <a id="validKeyText" href="batch-obfuscator.html">Key Accepted! Click here to continue.</a>
  <a id="invalidKeyText">Invalid Key, Try Again.</a>
  </form>

下面的 CSS 部分

#validKeyText{
  color: rgb(0, 255, 64);
  font-size: 11px;
}
#invalidKeyText{
  color: rgb(145, 0, 0);
  font-size: 11px;
}

我该如何解决？

标签： javascript

解决方案

我尝试运行您的代码，当订单正确时它对我来说很好。

确保你的 javascript 在 html 之后，这样当你运行任何 document.getElementById 时，它实际上会从 DOM 返回一个元素而不是 null，然后它可以应用所需的样式。

推荐阅读