[英]Javascript Error: Uncaught TypeError: Cannot read property 'addEventListener' of null
我正在制作一個 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。
其次，您還需要在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 之后包含腳本並不意味着它會在頁面加載后運行。
這段代碼似乎有效。 我修復了代碼順序和拼寫錯誤。
<!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>
此外，您在這一行中有 2 個錯誤
HexInput.addEventListener("input",ToHEX());
所以這將是正確的
HexInput.addEventListener("input",ToHex);
謝謝 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);
});
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
主文件
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex());
});
未捕獲的TypeError：無法在JavaScript Webshare API中讀取null的屬性“ addEventListener”
[英]Uncaught TypeError: Cannot read property 'addEventListener' of null in JavaScript webshare api
未捕獲的類型錯誤：無法讀取 null 的屬性“addEventListener”？
[英]Uncaught TypeError: Cannot read property 'addEventListener' of null?
“未捕獲的TypeError：無法讀取null的屬性'addEventListener'”
[英]“Uncaught TypeError: Cannot read property 'addEventListener' of null”
未捕獲的類型錯誤：無法讀取 null 的屬性“addEventListener”
[英]Uncaught TypeError: Cannot read property 'addEventListener' of null
未捕獲的TypeError：無法讀取null錯誤的屬性'addEventListener'
[英]Uncaught TypeError: Cannot read property 'addEventListener' of null error
為什么顯示錯誤 Uncaught TypeError: “Cannot read property 'addEventListener' of null”？
[英]Why is it showing error Uncaught TypeError: “Cannot read property 'addEventListener' of null”?
未捕獲的類型錯誤：無法讀取 null 的屬性 addEventListener
[英]Uncaught TypeError: Cannot read property addEventListener of null
未捕獲的TypeError：無法讀取圖像上載的null錯誤屬性'addEventListener'
[英]Uncaught TypeError: Cannot read property 'addEventListener' of null error for image upload
未捕獲的TypeError：無法在window.onload讀取null的屬性'addEventListener'
[英]Uncaught TypeError: Cannot read property 'addEventListener' of null at window.onload
未捕獲的類型錯誤：無法讀取 null 的屬性“addEventListener”（多種形式）
[英]Uncaught TypeError: Cannot read property 'addEventListener' of null (multiple forms)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.