addEventListener () returns null

Question

addEventListener () returns null

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

Good afternoon, I'm trying to execute a function when loading the page, if I do it with addEventListener it returns null , but 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, it works perfectly, however now I'm going to 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 it returns null.

What is the correct way to do it? to be able to be for ES6 and I would appreciate it to be only Javascript, nothing of Frameworks since in jQuery or others I know how to do it.

Greetings.

javascript

asked by UnderZero_- 16.06.2016 в 16:18

source

3 answers

2

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

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

2. Use the window.onload regardless of where the scripts are and put your declaration there:

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

Original answer: Another way to use addEventListener would be:

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

Notice that the function is defined right there!

For what you can see in this very complete answer you have many possibilities.

answered by 16.06.2016 в 16:24

1

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 the button is defined, it will not work.

Two options:

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

Execute 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>

answered by 16.06.2016 в 16:27

error in build.gradle (android studio) dependencies Calculate memory in python

score 0 · Accepted Answer

It is likely that your JS code is running when the DOM is not ready yet. It is always advisable to put it before the close of <body> , as embedded or as a 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 action when the DOM is loaded.

document.addEventListener('DOMContentLoaded', () => {
    // aquí todo tu código
});