我正在制作一个 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，我还是个新手
最佳答案
你应该做一些改变:
首先，您需要在加载整个 DOM 后运行您的脚本。如果您在 DOM 完全加载之前运行脚本，那么您的 document.getElementById将无法找到该元素并将返回 null。
其次，你还需要改变ToHEX()至 ToHEX在你的addEventListener .前者正在执行 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 之后包含脚本并不意味着它会在页面加载后运行。
关于JavaScript 错误 : Uncaught TypeError: Cannot read property 'addEventListener' of null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48693635/