Javascript Error: Uncaught TypeError: Cannot read property 'addEventListener' of null
Question
I'm making a HEX to RGB colour converter and I have done all the things I think you are suppose to do and that is my JS code and HTML code
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")
}
and I get this Error
Uncaught TypeError: Cannot read property 'addEventListener' of null
at Main.js:3
I just got started learn JavaScript and I'm fairly new
5 answers
solution1
2 2018-02-08 19:51:16
You should make a few changes:
First, you need to run your script after the entire DOM has loaded . If you run your script before the DOM has fully loaded, then your document.getElementById won't be able to find the element and will return null.
Second, you also need to change ToHEX() to ToHEX in your addEventListener . The former was executing ToHEX immediately and returning nothing. The latter will pass the function to the addEventListener . Edit: It looks like you just updated your question to address this.
Here is the corrected code:
document.addEventListener("DOMContentLoaded", function(event) {
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHEX);
function ToHex() {
console.log("Test")
}
});
Lastly, you should also move your <script src="Main.js"></script> line back into the header -- it doesn't need to be inserted after your HTML. Including the script after your HTML doesn't mean that it will run after the page has loaded.
solution2
0 2018-02-08 19:55:08
This code seems to work. I fixed code order and typo error.
<!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>
solution3
0 2018-02-08 19:56:11
Also, you have 2 mistakes in this line
HexInput.addEventListener("input",ToHEX());
- the name of the method is misspelled
- When you attach the event handler you just pass the reference to the function and not the invocation
So this would be the correct one
HexInput.addEventListener("input",ToHex);
solution4
0 2018-02-08 20:21:27
Thanks Bassem Rabia It works
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);
});
solution5
-1 ACCPTED 2018-02-08 20:14:51
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
main.js
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex());
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.