jQuery keypress event listener not recognising key press input

user_12885185 0
Viewed 173

I have a project where if you press a certain key, a sound will play back and a button on-screen will animate. However, when I press the keys nothing happens.

This is the event listener I have.

$("document").on("keydown", function(event) {
  makeSound(event.key);
  buttonAnimation(event.key);
});

This is what the code looks through to determine what to do depending on which key is pressed.

function makeSound(key) {

  switch (key) {
    case "w":
      var tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();
      break;

    case "a":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;

    case "s":
      var tom3 = new Audio('sounds/tom-3.mp3');
      tom3.play();
      break;

    case "d":
      var tom4 = new Audio('sounds/tom-4.mp3');
      tom4.play();
      break;

    case "j":
      var snare = new Audio('sounds/snare.mp3');
      snare.play();
      break;

    case "k":
      var crash = new Audio('sounds/crash.mp3');
      crash.play();
      break;

    case "l":
      var kick = new Audio('sounds/kick-bass.mp3');
      kick.play();
      break;


    default: console.log(key);

  }
}


function buttonAnimation(currentKey) {

  var activeButton = $("." + currentKey);

  activeButton.addClass("pressed");

  setTimeout(function() {
    activeButton.removeClass("pressed");
  }, 100);

}

What have I done wrong that the event listener doesn't pick up the key presses? I have jQuery correctly imported.

jquery javascript
4 Answers

If you are going to attach event handler to document itself, then you must use $(document).on("keydown", function(event) {...}).

To get pressed key use event.originalEvent.key.

$(document).on("keydown", function(event) {
  makeSound(event.originalEvent.key);
  buttonAnimation(event.originalEvent.key);
});
user_79729330

You need to use event.which to capture the key pressed, you then compare the keycode (which you can obtain using console log). Seems to change depending on keyboard region. I believe it doesn't pickup modifier keys (Caps, Shift, CTRL).

edit:

short example

$("document").on("keydown", function(event) {
  makeSound(event.which);
  buttonAnimation(event.which);
});

function makeSound(key) {

  switch (key) {
    case 87:
      var tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();
      break;

    case 65:
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;

    case 83:
      var tom3 = new Audio('sounds/tom-3.mp3');
      tom3.play();
      break;

    case 68:
      var tom4 = new Audio('sounds/tom-4.mp3');
      tom4.play();
      break;

    case 74:
      var snare = new Audio('sounds/snare.mp3');
      snare.play();
      break;

    case 75:
      var crash = new Audio('sounds/crash.mp3');
      crash.play();
      break;

    case 76:
      var kick = new Audio('sounds/kick-bass.mp3');
      kick.play();
      break;


    default: console.log(key);

  }
}

Those keycodes I used may not work for you, be sure to console.log the event.which to obtain the correct keycode. If caps lock is enabled the key.code will be different for each character.

user_134983450

Don't wrap document with "". Simply use $(document). It should solve your problem. Check your code below with only one update.

$(document).on("keydown", function(event) {
  makeSound(event.key);
  buttonAnimation(event.key);
});

function makeSound(key) {
  
  switch (key) {
    case "w":
      var tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();
      break;

    case "a":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;

    case "s":
      var tom3 = new Audio('sounds/tom-3.mp3');
      tom3.play();
      break;

    case "d":
      var tom4 = new Audio('sounds/tom-4.mp3');
      tom4.play();
      break;

    case "j":
      var snare = new Audio('sounds/snare.mp3');
      snare.play();
      break;

    case "k":
      var crash = new Audio('sounds/crash.mp3');
      crash.play();
      break;

    case "l":
      var kick = new Audio('sounds/kick-bass.mp3');
      kick.play();
      break;


    default: console.log(key);

  }
}


function buttonAnimation(currentKey) {

  var activeButton = $("." + currentKey);

  activeButton.addClass("pressed");

  setTimeout(function() {
    activeButton.removeClass("pressed");
  }, 100);

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

user_96952860

There is an issue in your code, you are send the event object to makeSound(event); so you have to use key.key not compare the whole object to the character string value:

$(document).on("keydown", function (event) {
  makeSound(event);
  //buttonAnimation(event);
});

function makeSound(key) {
  console.log(key.key);
  switch (key.key) {
    case "w":
      var tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();
      break;

    case "a":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;

    case "s":
      var tom3 = new Audio("sounds/tom-3.mp3");
      tom3.play();
      break;

    case "d":
      var tom4 = new Audio("sounds/tom-4.mp3");
      tom4.play();
      break;

    case "j":
      var snare = new Audio("sounds/snare.mp3");
      snare.play();
      break;

    case "k":
      var crash = new Audio("sounds/crash.mp3");
      crash.play();
      break;

    case "l":
      var kick = new Audio("sounds/kick-bass.mp3");
      kick.play();
      break;

    default:
      console.log(key);
  }
}

function buttonAnimation(currentKey) {
  var activeButton = $("." + currentKey);

  activeButton.addClass("pressed");

  setTimeout(function () {
    activeButton.removeClass("pressed");
  }, 100);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

user_8963580
Related