JS Error: Uncaught TypeError: Can not read property 'addEventListener' of null

3

I'm setting up the function to open a menu. But I'm getting the error message "Uncaught TypeError: Can not read property 'addEventListener' of null"

Below is the code I'm using to open the menu with JS

   var veri = 1;
var trigger = document.getElementById('menu-trigger').addEventListener("click",function(){
var menu = document.getElementById('menu-hidde');
if (veri == 1) {
    menu.style.left = "0px";
    veri = 0;
}else{
    menu.style.left = "-100%";
    veri = 1;
}
})

And also the HTML code where I quote the same

 <!DOCTYPE html>
<html lang"en">

<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos.css" media="all" />
<script type="text/javascript" src="teste.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<title>Styles Conference</title>
</head>



<body>
<div class="menu-trigger" id="menu-trigger">
    <div></div>
    <div></div>
    <div></div>
</div>
<nav class="menu-hidde" id="menu-hidde">
	<ul>
		<li>teste</li>
		<li>teste</li>
		<li>teste</li>
		<li>teste</li>
	</ul>
</nav>

How can I fix this?

    
asked by anonymous 06.04.2018 / 21:28

2 answers

0

Regarding your script:

<script type="text/javascript" src="teste.js"></script>

Switch to:

<script type="text/javascript" src="teste.js" async></script>
  

Reason:

Your js is running even before the HTML loads in the browser. This way, it does not find the element you're looking for with getElementById .

Think only: How could it add the listener to a null object?

The async attribute causes the browser to load your script, in this case, last. After HTML.

    
06.04.2018 / 22:09
2

You have to use either window.onload or document.addEventListener('DOMContentLoaded'); , because the script loaded before the page and therefore the HTML elements did not yet exist.

So for example:

document.addEvent('DOMContentLoaded', function () {
    var veri = 1;
    var trigger = document.getElementById('menu-trigger').addEventListener("click",function(){
    var menu = document.getElementById('menu-hidde');
    if (veri == 1) {
        menu.style.left = "0px";
        veri = 0;
    }else{
        menu.style.left = "-100%";
        veri = 1;
    }
    });
});

Or you can use the defer attribute on it too, like this:

<script defer type="text/javascript" src="teste.js"></script>

Similar to what you did in:

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

That according to caniuse is supported by all modern browsers, defer will only run the script when the document (DOM) is ready.

Async is different from Defer

The async attribute suggested in Diego's response does not work as stated:

  

The async attribute causes the browser to load your script, in this case last. After HTML.

The async loads the file asynchronously, ie without synchronization, it may finish loading or executing before the HTML, depending on the weight of the HTML page, or this may fail.

The correct would be to use defer that this will wait for the HTML content to be downloaded and the parse be done and then yes the script executes.

    
06.04.2018 / 22:04