Image change on pressing keyup and keydown

Question

I am new to JavaScript and this community. I apologize if this has been asked before, but the threads I found for this topic did not really help me with this specific problem.

I would like to achieve the following working:

1. Image 1 is displayed.
2. If you press the left arrow key (keydown) the image should change to image 2.
3. If you stop pressing (keyup), it should change to image 3.
4. If you press the right arrow key it should change to image 4 and on keyup, change to image 5.

The code is:

<img src="img/image1.png" id="myIMG">

and

var imgs = ["img/image5.png", "img/image3.png", "img/image1.png", "img/image4.png"];

function changeIMG(dir) {
    var img = document.getElementById("myIMG");
    img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
}

        var keys = {};

$(document).keydown(function (event) {
    keys[event.which] = true;
}).keyup(function (event) {


    if(e.keyCode == 37){
         delete keys[37];
        changeIMG(+1);
}
else if(e.keyCode == 39){
    delete keys[39];
    changeIMG(+2);
}


});

function IMGLoop() {
    if (keys[37]) { 
        changeIMG(+3);

    } else if (keys[39]) { 
        changeIMG(+4);
    }

    setTimeout(IMGLoop, 20);
}
IMGLoop();

The issue is described below. The keyup does not do anything and the keydown only works once and then I can not even switch between left and right anymore. I need to do this with a loop because I also want to do other things on the loop that are not displayed in this code. I would appreciate any type of help.

Answer 1

Hope this helps you

var imgs = [
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQgz2HMpGysZL6ifYfhqWASDoA0b2MyX-gyMuQszgYRv87yr9qug",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQV3JL_HtVvlLr3Xy-KQV5MNmIF2-kCb9cHB4oXkUKQ1jiLT0H",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgDmo-5YpwYK9Yc35CK1oq3Y2zHDnXlu3q6m7GnSvLarDTRl0B",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt2dZklq8eDbsNL1vZ0MTwZsm0KWDIxl6YifmbUqjPiE5lOmIe"
];
var showImageName = 2;

function changeIMG(dir) {
  var img = document.getElementById("myIMG");
  img.src = imgs[dir];
  img.alt = dir;
}

var keyPressed = false;

function f(e) {
  if (e.keyCode == 37) {
    showImageName--;
    if (showImageName == -1) {
      showImageName = imgs.length - 1;
    }
    changeIMG(showImageName);
  } else if (e.keyCode == 39) {
    showImageName++;
    if (showImageName == imgs.length) {
      showImageName = 0;
    }
    changeIMG(showImageName);
  }
}

$(document)
  .keydown(function(e) {
    if (!keyPressed) {
      keyPressed = true;
      f(e);
    }
  })
  .keyup(function(e) {
    if (keyPressed) {
      keyPressed = false;
      f(e);
    }
  });

changeIMG(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img alt='' src="" id="myIMG">

---

Update after question edited

var imgs = [
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQgz2HMpGysZL6ifYfhqWASDoA0b2MyX-gyMuQszgYRv87yr9qug",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQV3JL_HtVvlLr3Xy-KQV5MNmIF2-kCb9cHB4oXkUKQ1jiLT0H",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgDmo-5YpwYK9Yc35CK1oq3Y2zHDnXlu3q6m7GnSvLarDTRl0B",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt2dZklq8eDbsNL1vZ0MTwZsm0KWDIxl6YifmbUqjPiE5lOmIe",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnDWTv5oLaNgUm_SXQFSzzBJl-21c7wLCC6Hgld-ndQ1k0knly"
];
var showImageName = 2;

function changeIMG(dir) {
  var img = document.getElementById("myIMG");
  img.src = imgs[dir];
  img.alt = dir;
}

var keyPressed = false;

function f(e, str) {
  switch (str) {
    case "up":
      if (e.keyCode == 37) {
        changeIMG(2);
      } else if (e.keyCode == 39) {
        changeIMG(4);
      }
      break;
    case "down":
      if (e.keyCode == 37) {
        changeIMG(1);
      } else if (e.keyCode == 39) {
        changeIMG(3);
      }
      break;
  }
}

$(document)
  .keydown(function(e) {
    if (!keyPressed) {
      keyPressed = true;
      f(e, "down");
    }
  })
  .keyup(function(e) {
    if (keyPressed) {
      keyPressed = false;
      f(e, "up");
    }
  });

changeIMG(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img alt='' src="" id="myIMG">