How to make javascript execute when click element? [duplicate]

I hope you all alright

I'm new in web development and I'm trying to create a slider show but the buttons are not working at all, I have tried various ways and this is the last update of my code, can someone please tell me where the problem is?

My HTML

        <div class = "slider">
            <div class = "sliderBox">
            
             <div class = "sliderItem active">
                
                <img src = "Logo11.png" width = "300" height = "300" alt = "logo" class = "sliderImg">
                <div class = "sliderItemText"> Slide 1 </div>

             </div>

                <div class = "sliderItem">
                
                <img src = "Logo22.png" alt = "logo" width = "300" height = "300" class = "sliderImg">
                <div class = "sliderItemText"> Slide 2 </div>

            </div>

            <div class = "sliderItem">
                
                <img src = "Logo33.png" alt = "logo" width = "300" height = "300" class = "sliderImg">
                <div class = "sliderItemText"> Slide 3 </div>

            </div>  

         </div>
         
            <div class="rightButton"> > </div>
            <div class="leftButton"> < </div>
       </div> 

My CSS

.slider{
    max-width: 700px;
    border:10px solid  #29a8e2;
    margin:80px auto;
    position: relative;
    overflow: hidden;
}

.slider .leftButton,.slider .rightButton{
  position: absolute;
  height: 40px;
  width: 40px;
  background-color: #444444;
  border-radius: 50%;
  color:#ffffff;
  font-size: 20px;
  top:50%;
  cursor: pointer;
  margin-top: -20px;
  text-align: center;
  line-height: 40px; 
}

.slider .leftButton:hover, .slider .rightButton:hover{
 box-shadow: 0px 0px 10px black;
 background-color: #29a8e2;
}

.slider .leftButton{
    left: 30px;
}
.slider .rightButton{
    right: 30px;
}
.slider .sliderBox .sliderItem .sliderImg{
    max-width: 100%;
    display: block;
    animation:zoom 1s ease;
}

@keyframes zoom{
    0%{transform: scale(2);opacity: 0}
    50%{transform: scale(2);}
    100%{transform: scale(1);opacity:1}
}
.slider .sliderBox .sliderItem{
    display: none;
    position: relative;
}
.slider .sliderBox .sliderItem .sliderItemText{
position: absolute;
width: 100%;
height: 60px;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,.5);
line-height: 60px;
text-align: center;
color: #ffffff;
font-size: 30px;

}

.slider .sliderBox .sliderItem.active{
    display: block;
}

My Javascript

function start() {

    
    var images = document.getElementsByClassName("sliderItem");
    
    var leftButton = document.getElementsByClassName("leftButton");
    
    var rightButton = document.getElementsByClassName("rightButton");
    
    var imagesLength = images.length;
    
    var counter = 0;

    }


   function decreseMyButton(){ 
        
            counter--; 
            
            if(counter < 0 )  {
               counter = 0;
            }
            
            for(var i = 0;i<imagesLength;i++){
               images[i].classList.remove("active");
            }
            
            images[counter].classList.add("active");  
            
            
            
        }
        
        function increaseMyButton(){ 
              
              counter++;
             
              
              
            
            if(counter >= imagesLength )  {
               counter = imagesLength - 1;
            }
            
            for(var i = 0;i< imagesLength ;i++){
              images[i].classList.remove("active");
            }
            images[counter].classList.add("active"); 
            
            
              
        }
        
        
        start();
        
        document.getElementsByClassName("rightButton").onclick = function(){ decreseMyButton(); };  
        document.getElementsByClassName("leftButton").onclick = function(){ increaseMyButton(); };  
    

I have tried to add window.alert to see where the problem is and it seams to me it doesn't go inside the functions except for start(), it executes it

Thanks a lot