Javascript: Uncaught Typeerror: Cannot Call Method 'Addeventlistener' of Null

Javascript: Uncaught TypeError: Cannot call method 'addEventListener' of null

Your code is in the <head> => runs before the elements are rendered, so document.getElementById('compute'); returns null, as MDN promise...

element = document.getElementById(id);

element is a reference to an Element object, or null if an element with the specified ID is not in the document.

MDN

Solutions:

Put the scripts in the bottom of the page.
Call the attach code in the load event.
Use jQuery library and it's DOM ready event.

What is the jQuery ready event and why is it needed?

(why no just JavaScript's load event):

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers...

...

ready docs

Cannot call method addEventListener() of null - even using jQuery DOM ready event

You are trying to get the element with the id AMPlayer, but you don't have one.

You have a string containing the HTML to create one, but it hasn't been added to the DOM.

Cannot read property 'addEventListener' of null

I think the easiest approach would be to just check that el is not null before adding an event listener:

var el = document.getElementById('overlayBtn');
if(el){
  el.addEventListener('click', swapper, false);
}

Changing html input image through javascript, cannot call method addEventListener

playButton = document.getElementsByName('playButton')[0]; you will get an empty array here

you need to add name attribute to your input tag or change to

playButton = document.getElementById('playButton');

how to fix : TypeError: Cannot read property 'addEventListener' of null”…?//

This happens because you're including the file containing your JavaScript in the <head> section of your html file.

<script type="text/javascript"  src="app.js" charset="utf-8"></script>

That means the browser will try to execute this statement

const p_div = document.getElementById("p");

but will fail to do so because the element in question is defined in the <body> section later on.
Try to move the <script> section to the end of the <body>.

Uncaught TypeError: Cannot read property 'addEventListener' of null when i run got this error

Just call the function inside the eventlistener function:

You need to use the . to get element which has class.

var l = document.querySelector(".btns")
l.addEventListener("click", function() {
    alert();
});

function alert(){
    var k = Math.floor(Math.random() * 10);
    alert(k);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <input class="btns" type="submit" placeholder="submittt" />
        <script src="index.js"></script>
    </body>
</html>

Javascript: Uncaught Typeerror: Cannot Call Method 'Addeventlistener' of Null