Unable to click button in the webpage I’m creating(no error is showing)

Here’s the HTML code

<div class="card-bottom">
                            
                
                    
                        
                        <div class="choice" >
                          
                            <button  type ="button" class ="about_me" " > About me</button>
                          
                            <button type ="button" class="projects" >Projects</button>
                          
                            <button type ="button" class="contact_me">Contact me</button>
                        
                      
                 </div>
                
            <div class="Languages" style="padding-top: 20px;">
              <h2 class="heading">Languages</h2>
              <div class="igd-details">
                <div class="igd-tag igd-java" style='float:left; width:15%'>
                  <h3>JAVA</h3>
                  <img src="./icons8-java-64.png" alt="" class="jaim">
                 
                </div>

Here’s the JavaScript code

 about.addEventListener('click',()=>
{
    about.style.background='var(--black)';
    
  
  
});

I’m targeting the button using this

project=document.querySelector(".projects"),

I tried different methods to solve this(yes my script tag is just above ) but I’m unable to click or use the functionalities of any of the buttons. I also inspected the element and no error is being shown.I’m using VS code.