I'm new to codding but i'm not sure why this is not working

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

<html lang="en">
  <head>
    
    <title> project 1</title>
    <link rel="stylesheet" href="css/proj1.css">
  </head>
  <body>
    <button id="btn1" class="1btn"></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("1btn");

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

--------javaScript---------------

You did not tell us what is not working.

When i run the function , an error pops up (cannot read property ‘addEventListener’ of null)

  1. The id on the button is btn1, not 1btn (that is the class). So you need to fix the getElementById accordingly.

  2. The property on the element is classList not classlist.

Also, remember you have to run the game function.

1 Like

Thanks for noticing the mistakes , but when i call the function and run it , it says (Uncaught typeError: cannot read property ‘addEventListener’ of null)

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