CODEWITHSUNDEEP
javascripthtml
Moorad
Moorad

Reputation: 13

Javascript Error: Uncaught TypeError: Cannot read property 'addEventListener' of null

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

Upvotes: 1

Views: 1255

Answers (5)

Dario Garc&#237;a moya
Dario Garc&#237;a moya

Reputation: 132

Also, you have 2 mistakes in this line

HexInput.addEventListener("input",ToHEX());

  1. the name of the method is misspelled
  2. 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);

Upvotes: 0

Moorad
Moorad

Reputation: 13

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);
});

Upvotes: 0

qwermike
qwermike

Reputation: 1486

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>

Upvotes: 0

Bassem Rabia
Bassem Rabia

Reputation: 226

http://prntscr.com/ic1vom

<!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());
});

Upvotes: -1

Elliot B.
Elliot B.

Reputation: 17651

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.

Upvotes: 2

Related Questions