Need to check for specific key presses in Javascript

Question

I am having troubles understanding why the code below works, and I think my confusing arises with the callback to "event" in this case. I have a few images that when clicked or a corresponding keypress is logged, a sound will play. While everything works, I can't understand why the below code uses "event" instead of just using an empty function and call to "this" (ie: this.key)

I have tried to use the "this" method but it didn't work. A bit of research and I found I had to use "event" in my function.

function addListenerToAllDrums() {
    //store buttons in array
    var buttonArray = document.querySelectorAll(".drum");
    //iterate thru each btn
    for (var i = 0; i < buttonArray.length; i++) {
        //add a listener each iter.
        buttonArray[i].addEventListener("click", function () {
            //store html of button (ie: `w`) to variable
            var buttonInnerHTML = this.innerHTML;
            //the stored html is passed to the checkSound function
            checkSound(buttonInnerHTML); //ie: `w` = case w
        });
    }
}

//check for keypress
document.addEventListener(`keydown`, function (event) {
    //store the key in a variable
    var pressedKey = event.key
    //passes pressedKey as string (ie: `w`) to checkSound(`w`)
    checkSound(pressedKey);
});

//make a sound dependant on button press or keypress functions
function checkSound(input) {
    //Create Switch Statement based on keypress/button click input
    switch (input) {
        case `w`:
            var snare = new Audio('sounds/snare.mp3');
            snare.play();
        case `a`:
            var tom1 = new Audio('sounds/tom-1.mp3');
            tom1.play();
            break;
        case `s`:
            var tom3 = new Audio('sounds/tom-3.mp3');
            tom3.play();
            break;
        case `d`:
            var kick = new Audio('sounds/kick-bass.mp3');
            kick.play();
            break;
        case `j`:
            var tom4 = new Audio('sounds/tom-4.mp3');
            tom4.play();
            break;
        case 'k':
            var tom2 = new Audio('sounds/tom-2.mp3');
            tom2.play();
            break;
        case `l`:
            var crash = new Audio('sounds/crash.mp3');
            crash.play();
            break;


        default:
            console.log(this.innerHTML)
    }
}



addListenerToAllDrums();

How can my clicks work with "this" but keypresses need "event"?

Matt Ellen · Accepted Answer · 2019-05-29 16:17:19Z

2

this refers to the object that the event is called on. For the "click" event, that's a button. For the "keydown" event that's the whole document.

So, with the click event, this.innerHTML gets the text on the buttons. For the document, this.innerHTML would get nothing, which is not what you want.

Luckily, the event argument for the "keydown" event stores the key that was pressed (in the key property), so you can get the information that way.

edited May 29, 2019 at 16:17

answered May 29, 2019 at 16:12

Matt Ellen

11.6k5 gold badges74 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Colton Van Bastelaere Over a year ago

on a side note and for interests sake, does it store the event only as a string? for example if one of my cases happened to be 1, would it be stored as "1" or 1?

Matt Ellen Over a year ago

The key property of the keydown event argument is stored as a string, so it will always be a string, even if you push a number.

Haroldo_OK · Accepted Answer · 2019-05-29 16:06:51Z

0

That's because, in your case, this would represent the element to which the event was bound, while event would say what happended to the element.

answered May 29, 2019 at 16:06

Haroldo_OK

7,3033 gold badges50 silver badges86 bronze badges

Collectives™ on Stack Overflow

Need to check for specific key presses in Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related