CODEWITHSUNDEEP
javascriptdom
Colton Van Bastelaere
Colton Van Bastelaere

Reputation: 345

Need to check for specific key presses in Javascript

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"?

Upvotes: 1

Views: 58

Answers (2)

Matt Ellen
Matt Ellen

Reputation: 11592

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.

Upvotes: 2

Haroldo_OK
Haroldo_OK

Reputation: 7230

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.

Upvotes: 0

Related Questions