按键事件未在右箭头键上触发

Question

I have setup a keypress event that should fire when the user clicks the right arrow key on the keyboard. For some reason it is not firing. Using Chrome dev tools confirms event is not firing. When the user presses the right key it should insert an image onto the webpage (and delete another image).

There is quite a lot of code so I apologise but I will only put in what I feel is relevant.

Here is the event listener:

 document.addEventListener("keypress", (event) => {
                if (event.keycode === 39 || event.which === 39) {
                    newPosition = `box-${currentPos + 1}`;
                    naviCtrl.removeCharacter(DOMstrings);
                    naviCtrl.rightBtn(currentPos, chosenCharacter, newPosition);
                }
            });

Here is the rightBtn method:

 rightBtn: (currentPos, chosenCharacter, newPosition) => {
                if (newPosition.style.border-left === "none" && currentPos.style.border-right === "none") {
                    document.getElementById(newPosition).insertAdjacentHTML("beforeend", '<img class="character-img character-box" src="' + chosenCharacter + '">');
                    console.log(newPosition);

The event listeners are setup when the page loads with this init function:

 return {
        init: () => { 
            setupEventListeners() 
        }
    };

You can see, this method is called globally here:

appController.init();

Answer 1

The event listener keypress is deprecated , as is event.which . You should use (probably) use keydown in this instance, and the correct keycode for right arrow ( ArrowRight ), as follows:

document.addEventListener("keydown", (event) => {
  if (event.keycode === "ArrowRight" || event.which === 39) {
    newPosition = `box-${currentPos + 1}`;
    naviCtrl.removeCharacter(DOMstrings);
    naviCtrl.rightBtn(currentPos, chosenCharacter, newPosition);
  }
});