CODEWITHSUNDEEP
javascript
Chris Cooper
Chris Cooper

Reputation: 27

How can I pass a keypress value to a function, through an event listener?

I have looked for an existing answer before asking, but either couldn't find what I was looking for or it's gone over my head.

I'm studying JS and wanted to expand on something my course hasn't fully covered yet. Basically, using vanilla JavaScript, I want to compare keypresses to ["w","a","s","d"].

Here's my code:

function moveCommand(direction) {
    var whatHappens;
    switch (direction) {
        case direction === event.key["w"]:
            var outcome = battle(1) ? "run your sword through it! Gain 25 exp!" : "take serious damage. Gain 5exp. Lose 20hp.";
            whatHappens = "You encounter a monster and " + outcome;
            break;
        case direction === event.key["a"]:
            whatHappens = "You arrived home";
            break;
        case direction === event.key["s"]:
            // player.gold += 15;
            whatHappens = "You found 15 gold!";
            break;
        case direction === event.key["d"]:
            var outcome = battle(2) ? "send it packing! Gain 10exp!" : "get pelted with stones. Gain 2exp. Lose 10hp.";
            whatHappens = "You run into a troll and " + outcome;
            break;
        default:
            whatHappens = "Please enter a valid direction";
    }
    return whatHappens;
}

document.addEventListener('keypress', moveCommand);

I understand why this doesn't work (the keypress probably isn't passing to 'direction' and my syntax for checking event.key might not be right), but I can't find how to make it work. Is it even possible without jQuery or some other extension?

Upvotes: 1

Views: 188

Answers (1)

ROOT
ROOT

Reputation: 11622

There are issues with switch statements and how you handle the event, please read through the documentation on how to use switch statements, note that switch statement doesn't require a condition inside case, also for the key press event, event.key already return the key pressed letter, here is a snippet I made to show how to make it work, I removed battle() since you didn't include it, here is a working snippet:

function moveCommand(event) {
    var whatHappens;
    switch (event.key) {
        case 'w':
            var outcome = 1 ? "run your sword through it! Gain 25 exp!" : "take serious damage. Gain 5exp. Lose 20hp.";
            whatHappens = "You encounter a monster and " + outcome;
            break;
        case 'a':
            whatHappens = "You arrived home";
            break;
        case 's':
            // player.gold += 15;
            whatHappens = "You found 15 gold!";
            break;
        case 'd':
            var outcome = 1 ? "send it packing! Gain 10exp!" : "get pelted with stones. Gain 2exp. Lose 10hp.";
            whatHappens = "You run into a troll and " + outcome;
            break;
        default:
            whatHappens = "Please enter a valid direction";
    }
    console.log(whatHappens)
}

document.addEventListener('keypress', moveCommand);

Upvotes: 1

Related Questions