EventListener property cannot be read

Question

I got a JavaScript file and a bootstrap form from the internet. On the page there are 2 inputs, when you fill them in it will add the numbers together and put the new number out.

When I tried it out it didn't do anything, in the console I got 2 errors. First one being that bootstraps JavaScript needed jQuery so I added that, and the second one says "Uncaught TypeError: Cannot read property 'addEventListener' of null", and I can't figure out why I get this error.

The form code is:

<!DOCTYPE html>
<html>
    <head>

    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="test.js"></script>


        <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>

    <body>
    <div class="container text-center">

      <h1>
        test title
      </h1>

    <form action="#" class="form-inline">

      <input type="text" id="first"class="form-control" placeholder="Enter your first number">
        <input type="text" id="second" class="form-control" placeholder="Enter your second number">

    </form>

      <h2 id="result"></h2>

    </div>
    </body>
</html>

The JavaScript code is:

var first = document.getElementById('first');
var second = document.getElementById('second');
var result = document.getElementById('result');

first.addEventListener("input", sum);
second.addEventListener("input", sum);

function sum() {

    var one = parseFloat(first.value) || 0;
    var two = parseFloat(second.value) || 0;

    var add = one+two;

    result.innerHTML = "Your Sum is : " + add;

}

So is there maybe anyone who can explain what I'm messing up here?

You're running the JS code before the DOM has been loaded. Either place the logic in a load handler, or put the ` — Rory McCrossan, May 18 '17 at 11:51
Also note that Bootstrap requires jQuery.js, which your page does not include — Rory McCrossan, May 18 '17 at 11:52

score 0 · Accepted Answer · answered May 18 '17 at 11:55

0

Add this before because your 'test.js' file is loaded before the DOM elements are loaded.

answered May 18 '17 at 11:55

Arunkumar Kathirvel

224
3
11

Add before
because your 'test.js' file is loaded before the DOM elements are loaded.
– Arunkumar Kathirvel May 18 '17 at 11:55

score 0 · Answer 2 · edited May 23 '17 at 11:54

This is because you javascript file is loading first, than the Dom element is getting created. So when you js loads, it will look up for the elements with first and second which is not there at that time.

var first = document.getElementById('first');
var second = document.getElementById('second');
var result = document.getElementById('result');

first.addEventListener("input", sum);
second.addEventListener("input", sum);

function sum() {

    var one = parseFloat(first.value) || 0;
    var two = parseFloat(second.value) || 0;

    var add = one+two;

    result.innerHTML = "Your Sum is : " + add;

}

<!DOCTYPE html>
<html>
    <head>

    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="test.js"></script>


        <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>

    <body>
    <div class="container text-center">

      <h1>
        test title
      </h1>

    <form action="#" class="form-inline">

      <input type="text" id="first"class="form-control" placeholder="Enter your first number">
        <input type="text" id="second" class="form-control" placeholder="Enter your second number">

    </form>

      <h2 id="result"></h2>

    </div>
    </body>
</html>

Read below: Here's what happens when a browser loads a website with a tag on it:

Fetch the HTML page (e.g. index.html) Begin parsing the HTML The parser encounters a tag referencing an external script file. The browser requests the script file. Meanwhile, the parser blocks and stops parsing the other HTML on your page. After some time the script is downloaded and subsequently executed. The parser continues parsing the rest of the HTML document.

Visit to see full description: Where should I put <script> tags in HTML markup?

EventListener property cannot be read

2 Answers2