开发者问题收集

Javascript 错误：未捕获的类型错误：无法读取 null 的属性“addEventListener”

2018-02-08
1232
javascript html

我正在制作一个 HEX 到 RGB 颜色转换器，我已经完成了我认为你应该做的所有事情，这就是我的 JS 代码和 HTML 代码

HTML 

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Colour Converter</title>
    </head>
<body>
    <center>
    <h1>Hex - RGB</h1>
    <input id="hex">
    <input id="rgb">
    <script src="Main.js"></script>
    </center>

</body>
</html>

Javascript 

var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHex);


function ToHex() {
  console.log("Test")
}

我收到此错误 

Uncaught TypeError: Cannot read property 'addEventListener' of null
at Main.js:3

我刚开始学习 JavaScript，我还很新

3个回答

您应该进行一些更改：

首先，您需要在 整个 DOM 已加载 之后运行脚本。如果在 DOM 完全加载之前运行脚本，则 document.getElementById 将无法找到元素并返回 null。

其次，您还需要在 addEventListener 中将 ToHEX() 更改为 ToHEX 。前者立即执行 ToHEX 并且不返回任何内容。后者将 将函数 传递给 addEventListener 。 编辑： 看起来您刚刚更新了您的问题以解决这个问题。

这是更正后的代码： 

document.addEventListener("DOMContentLoaded", function(event) {
    var HexInput = document.getElementById("hex");
    var RGBInput = document.getElementById("rgb");
    HexInput.addEventListener("input",ToHEX);


    function ToHex() {
      console.log("Test")
    }
});

最后，您还应该将 <script src="Main.js"></script> 行移回标题中 - 它不需要插入到您的 HTML 之后。在 HTML 之后包含脚本并不意味着它会在页面加载后运行。

Elliot B.
2018-02-08

此代码似乎有效。我修复了代码顺序和拼写错误。 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Colour Converter</title>
</head>
<body>
  <center>
    <h1>Hex - RGB</h1>
    <input id="hex">
    <input id="rgb">
    <script>

      function ToHex() {
        console.log("Test");
      }

      var HexInput = document.getElementById("hex");
      var RGBInput = document.getElementById("rgb");
      HexInput.addEventListener("input", ToHex);

    </script>
  </center>
</body>
</html>
qwermike
2018-02-08

感谢 Bassem Rabia 它有效

HTML 

<!doctype html>
<html lang="en">
    <head></head>
    <body>
        <input id="hex">
        <input id="rgb">
        <script src="main.js"></script>
    </body>
</html>

JavaScript 

document.addEventListener("DOMContentLoaded", function(event){
    function toHex(){
        console.log("Test");
    }

    var HexInput = document.getElementById("hex");
    var RGBInput = document.getElementById("rgb");
    HexInput.addEventListener("input", toHex);
});
Moorad
2018-02-08