When i run the game function it says (UnCaught typeEror: cannot read property 'addEventlistener' of null)

JavaScript
1

-----------html-------------

<html lang="en">
  
  <head>
    <title> project 1</title>
    <link rel="stylesheet" href="css/proj1.css">
  </head>
  <body>
    <button id="btn1"></button>
    <div class="screen1"></div>
    <div id="player"></div>
  
  </body>
  <script src="java/proj1.js">       </script>
  
</html

-----------html-------------
------------css--------------

body{
  background-color:black;
  margin-top:80px;
  margin-bottom:150px;
  margin-left:8px;
  margin-right:8px;
  
}
.screen1{
  height:300px;
  width:615px;
  border:3px solid #333333;
  background-color:#e6e6e6;
  
  
}
#btn1{
  height:68px;
  width:68px;
  background-color:#00264d;
  border-radius:100%;
  border:1px solid #001aa3;
  position:absolute;
  top:308px;
  right:30px;
}
#player{
  
  height:37px;
  width:25px;
  border-radius:20%;
  background-color:#215f3f;
  border:1px solid #143926 ;
  position:absolute;
  top:339px;
  right:316px;
  
};
  
  
.animate{ animation: jump 850ms;

};

@keyframes jump{
  
 0%{top:339px}
 10%{top:326px}
 20%{top:314px}
 30%{top:302px}
 40%{top:296px}
 60%{top:296px}
 70%{top:302px}
 80%{top:314px}
 90%{top:326px}
 100%{top:339px}
 
};

------------css--------------
--------javascript----------

let player = document.getElementById("player");
let button = document.getElementById("btn1");

function game (){
  
  button.addEventListener('click',function(){
   if (player.classList !="animate") {
   
    player.classList.add("animate")
    setTimeout(function() {
      
      player.classList.remove("animate")
    }, 850);
   };
  });
};

--------javascript----------

2

The JS code works for me. But you do have some semicolons in the CSS that shouldn’t be there. Selectors do not end with a semicolon.

If you get the error you say you do, make sure the code you posted is actually the same as the code you are running. getElementById will return null if it does not find the element (like using the wrong id or if the element is not on the page).

3

Well i copied it and paste it here , so it should be the same .

4

Your JavaScript code should work, there’s nothing wrong with it. The only thing I could think of is that your button isn’t in the DOM yet when your script runs. Try wrapping your code with a DOMContentLoaded listener:

document.addEventListener('DOMContentLoaded', () => {

    /* your whole code goes here */

})
5

Should i put at the end of the js

6

No, right at the start, and all your code goes within the curly braces:

// first line of file
document.addEventListener('DOMContentLoaded', () => {

let player = document.getElementById("player");
let button = document.getElementById("btn1");

function game (){
  
  button.addEventListener('click',function(){
   if (player.classList !="animate") {
   
    player.classList.add("animate")
    setTimeout(function() {
      
      player.classList.remove("animate")
    }, 850);
   };
  });
};

})

// end of file
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.