addEventListener() returns null

Good afternoon, I'm trying to run a function when loading the page, if I do it with addEventListener it returns me null, however the same function with window.onload works perfectly.

Example with window.onload : 

function saludar() {
    document.querySelector('#elem').innerHTML = 'Hola piti';
}

window.onload = function () {
    document.querySelector('#btn').onclick = saludar;
};

HTML Code: 

<button id="btn">mostrar</button>
<div id="elem" ></div>

If you try it works perfectly, however now I will do the same with the listener:

Example with addEventListener: 

var target = document.querySelector('#btn');
    target.addEventListener('click', saludar, false);

function saludar() {
document.querySelector('#elem').innerHTML = 'Hola piti';
}

You will see that in this last Code returns null.

What is the right way to do it? to be for ES6 and I would appreciate that it was just Javascript, no Frameworks since in jQuery or others I know how to do it.

Greetings.

 1
Author: UnderZero_-, 2016-06-16
Source

3 answers

Your JS code is likely running it when the DOM is not ready yet. It is always advisable to put it before closing the <body>, as embedded or as link (<script src="...">).

<button id="btn">Mostrar</button>
<div id="elm"></div>

<script>
   const btn = document.querySelector('#btn');
   btn.addEventListener('click', saludar);
  
   function saludar() {
      document.querySelector('#elm').innerText = 'Hola'; 
   }
</script>

Or with ES6: 

btn.addEventListener('click', (e) => {
    document.querySelector('#elm').innerText = 'Hola';
});

You can also use the DOMContentLoaded event to execute an en action when the DOM is loaded.

document.addEventListener('DOMContentLoaded', () => {
    // aquí todo tu código
});
 1
Author: gugadev, 2016-06-16 14:52:26

EDIT: What I said is false; what you do is correct but the problem must be in that elements are loaded THEN in your script; to check this you only need to open the console (F12) and you will see an error of undefined or something like that. To fix it you have several ways:

1. Move the javascript code at the bottom of your page so that it loads after initializing the objects just before of closing the body tag as they indicate here .

2. Use the window.onload regardless of where the scripts are and place your statement There: 

window.onload = function () {
    target.addEventListener('click', saludar, false);
}

Original answer: Another serious way to use addEventListener: 

var target = document.querySelector('#btn');
target.addEventListener('click',  function() { document.querySelector('#elem').innerHTML = 'Hola piti'; }, false);

Notice that the function is defined right there!

So you can see in this very complete answer you have a lot of chances.

 3
Author: Miquel Coll, 2017-05-23 12:39:21

The problem is that with the first option you execute the code once the page has been loaded (in the load event of the window), instead with the second option the code (the addEventListener) is executed immediately.

If the code is found before it is defined the button will not work for you.

Two options:

Include your code at the bottom of the page, once the button is created.

Executes the code in the load event of the window, as in the first option: 

window.addEventListener('load', function(){
  var target = document.querySelector('#btn');
  target.addEventListener('click', saludar, false);
});

function saludar() {
  document.querySelector('#elem').innerHTML = 'Hola piti';
}
<button id="btn">mostrar</button>
<div id="elem"></div>
 1
Author: Asier Villanueva, 2016-06-16 14:27:49