Redundant click with next/previous buttons in image carousel

Question

I recently built an 6 image carousel for our website. I want it to hide the next/previous buttons when it is on the first and last images in the carousel.

The carousel initially loads correctly. However, upon clicking through, it is allotting an extra click for the last image. If I go backwards from the last image to the first, it does the same thing. It displays the first/last image, I hit the button, and then it shows the same image but the button is gone.

I want the button to disappear upon the first time the first/last image is shown. There is a redundant click. I can't seem to figure out what is causing it.

Here is the snippet of code that I suspect is causing the problem:

var counter = 0;

    if (counter === 0) { prevBtn.style.display = "none"; }
    if (counter === myimages.length-1) { nextBtn.style.display = "none"; }

    prevBtn.addEventListener("click", function(){
        if (counter > 0 && counter < myimages.length){
                counter--;
                myimage = myimages[counter];
                mycaption = mycaptions[counter];
                imageContainer.innerHTML = '<img src="'+myimage+'" />';
                captionContainer.innerHTML = mycaption;
                prevBtn.style.display = "block";
                nextBtn.style.display = "block";
            } else if (counter === 0) {
                prevBtn.style.display = "none";
            }
        });

    nextBtn.addEventListener("click", function(){
        if (counter < myimages.length-1){
            counter++;
            myimage = myimages[counter];
            mycaption = mycaptions[counter];
            imageContainer.innerHTML = '<img src="'+myimage+'" />';
            captionContainer.innerHTML = mycaption;
            prevBtn.style.display = "block";
            nextBtn.style.display = "block";
        } else if (counter === myimages.length-1) {
            nextBtn.style.display = "none";
        }
    });

Here is the full code, so you can see for yourself what I am talking about:

 // Declaring variable array of images. You can put as many as you want.
    const myimages = ["https://i.imgur.com/wv4IFTH.jpeg", "https://i.imgur.com/e9rdR6C.jpeg", "https://i.imgur.com/008kJgA.jpeg", "https://i.imgur.com/GBLGV8F.jpeg", "https://i.imgur.com/TuatGBH.jpeg", "https://i.imgur.com/niI3Ye6.jpeg"];
    const mycaptions = ["Test Caption 1", "Test Caption 2", "Test Caption 3", "Test Caption 4", "Test Caption 5", "Test Caption 6"]; 
    const prevBtn = document.getElementById("p-10-s-i-s-prev-btn");  // assigning variable for previous button
    const nextBtn = document.getElementById("p-10-s-i-s-next-btn");  // assigning variable for next button
    const imageContainer = document.getElementById("p-10-s-i-s-image-container"); // assigning variable for image container div
    const captionContainer = document.getElementById("p-11-s-i-s-caption-place-holder");
    var myimage = myimages[0]; // Assigning initial value for the varibale to show on page loading and showing first image.
    var mycaption = mycaptions[0]; // Assigning and showing the first caption of the first image.

    imageContainer.innerHTML = '<img src="'+myimage+'" />';
    captionContainer.innerHTML = mycaption;


   var counter = 0;

if (counter === 0) { prevBtn.style.display = "none"; }
if (counter === myimages.length-1) { nextBtn.style.display = "none"; }

prevBtn.addEventListener("click", function(){
    if (counter > 0 && counter < myimages.length){
            counter--;
            myimage = myimages[counter];
            mycaption = mycaptions[counter];
            imageContainer.innerHTML = '<img src="'+myimage+'" />';
            captionContainer.innerHTML = mycaption;
            prevBtn.style.display = "block";
            nextBtn.style.display = "block";
        } else if (counter === 0) {
            prevBtn.style.display = "none";
        }
    });

nextBtn.addEventListener("click", function(){
    if (counter < myimages.length-1){
        counter++;
        myimage = myimages[counter];
        mycaption = mycaptions[counter];
        imageContainer.innerHTML = '<img src="'+myimage+'" />';
        captionContainer.innerHTML = mycaption;
        prevBtn.style.display = "block";
        nextBtn.style.display = "block";
    } else if (counter === myimages.length-1) {
        nextBtn.style.display = "none";
    }
});

 .p-10-s-i-s-page-background{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      justify-content: center;
        align-items: center;
    }

    .p-10-simple-image-slider-wrapper{
        max-width: 45%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center
        margin-bottom: 20px;
    }

    #p-10-s-i-s-image-container{
        max-width: 100%;
        height: auto;
        display: flex;
        justify-content: center
    }

    #p-10-s-i-s-image-container img{
        max-width: 90%;
        justify-content: center;
        height: auto;
        display: flex;
        align-items: center;
        animation: p-10-image-animation 1s;
        
    }

    #p-10-s-i-s-prev-btn, #p-10-s-i-s-next-btn{
        width: 50px;
        font-family: 'Open Sans', sans-serif;
        font-size: 50px;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: orange;
    }

    #p-10-s-i-s-prev-btn:hover, #p-10-s-i-s-next-btn:hover{
        
        transition: all 1s;
        
    }

    .p-10-s-i-s-page-background h1{
        color: rgb(243, 236, 176);
    }

    @keyframes p-10-image-animation{
        0%{
            opacity: 0.5;
        }
        100%{
            opacity: 1;
        }
    }

    #p-11-s-i-s-caption-place-holder{
        padding: 5px 150px 5px 150px;
        font-family: 'Open Sans', sans-serif;
        color: #565555;
        text-align: left;
        font-size: 18px;
        line-height: 150%;
        margin-bottom: 20px;
    }

 <div class="p-10-s-i-s-page-background">
        
      
      <div class="p-10-simple-image-slider-wrapper">
            <div id="p-10-s-i-s-prev-btn">&#60;</div>
            <div id="p-10-s-i-s-image-container" ></div>
            <div id="p-10-s-i-s-next-btn">&#62;</div>
        </div>
      <div id="p-11-s-i-s-caption-place-holder">
        </div>
    </div>

Answer 1

As Noam commented, when you are grouping the else if statement with the preceding if statement, the following happens:

When you are on the first slide the counter gets set to zero, but then the else statement is not executed. When you again click on the previous button, this time counter is already zero, so the else part gets executed and the button is hidden. The same thing happens when you are on the last slide.

Solution: Include another if else statement to set display property of the button inside the main if block

prevBtn.addEventListener("click", function(){
    if (counter > 0 && counter < myimages.length){
            counter--;
            myimage = myimages[counter];
            mycaption = mycaptions[counter];
            imageContainer.innerHTML = '<img src="'+myimage+'" />';
            captionContainer.innerHTML = mycaption;
            if (counter === 0) {
              prevBtn.style.display = "none";
            }
            else {
              prevBtn.style.display = "block";
              nextBtn.style.display = "block";
            };
        }
    });

nextBtn.addEventListener("click", function(){
    if (counter < myimages.length-1){
        counter++;
        myimage = myimages[counter];
        mycaption = mycaptions[counter];
        imageContainer.innerHTML = '<img src="'+myimage+'" />';
        captionContainer.innerHTML = mycaption;
        if (counter === myimages.length - 1) {
            nextBtn.style.display = "none";
        }
        else {
          prevBtn.style.display = "block";
          nextBtn.style.display = "block";
        };
    }
});