JavaScript runs last function on script when key pressed (question regarding using key presses to show specific divs)

Question

I'm doing a slideshow based on divs and arrow keys, code below:

document.addEventListener("keydown", function (e) {
  if ($("#div-1").css("display") == "block") {
    if (e.keyCode == 39) {
      var AF = document.getElementById("div-1");
      AF.style.display = "none";
      var AG = document.getElementById("div-2");
      AG.style.display = "block";
    }
  }
  if ($("#div-2").css("display") == "block") {
    if (e.keyCode == 37) {
      var AH = document.getElementById("div-2");
      AH.style.display = "none";
      var AI = document.getElementById("div-1");
      AI.style.display = "block";
    }
  }
});

if ($("#div-2").css("display") == "block") {
  document.addEventListener("keydown", function (e) {
    if (e.keyCode == 39) {
      var AJ = document.getElementById("div-2");
      AJ.style.display = "none";
      var AK = document.getElementById("div-3");
      AK.style.display = "block";
    }

    if ($("#div-3").css("display") == "block") {
      if (e.keyCode == 37) {
        var AL = document.getElementById("div-3");
        AL.style.display = "none";
        var AM = document.getElementById("div-2");
        AM.style.display = "block";
      }
    }
  });
}

but when I pressed the right arrow key, it just jumps to div-3 (expecting it to go to div-2 from div-1). Not sure about the left arrow key, but I tried and it goes to div-2. Is there any solution to this?

Answer 1

I think you're approaching this too statically for Javascript. Here's a simple method that you may be able to adopt.

(make sure to click on the run snippet window or else your keypresses won't be recognized, it's in an iframe)

// tell your application what position youre at and how many positions are possible
var slider_position = 1; // position vector
var number_of_slides = 3; // number of slides

document.addEventListener("keydown", function (e) {

    // only act if left or right arrow keys are used
    if (e.keyCode == 39 || e.keyCode == 37) {
  
        // if 39, add 1, else subtract 1
        slider_position += e.keyCode == 39 ? 1 : -1;
    
        if (slider_position < 1) {
            // if slider position is less than 1, go to last slide
            slider_position = number_of_slides;
        } else if (slider_position > number_of_slides) {
            // if slider position is more than the number of slides, go to 1
            slider_position = 1;
        }
    
        // create an array from a list of your slider elements
        // then, forEach slider as "x", hide it
        Array.from(document.getElementsByClassName('slider_pane')).forEach(x => {
            x.style.display = "none";
        });
    
        // then display the slider at the current slider position
        document.getElementById("div-"+slider_position).style.display = "block";
    }
  
});

.slider_pane {
    display: none;
    background-color: #0070c0;
    padding: 80px 40px;
}
.slider_pane:first-child {
    display: block;
}

<div class="slider_pane" id="div-1">This is slide number 1</div>
<div class="slider_pane" id="div-2">This is slide number 2</div>
<div class="slider_pane" id="div-3">This is slide number 3</div>