how we can add two event listeners click and keydown in javascript

Question

I am trying to use click and keydown together but having a problem by pressing key. Is it possible that if we can join both events in one statement.

HTML

 <audio id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"> </audio>
 <div>
      <button name="Q">Q</button>
</div>

JavaScript

    const queButton = document.querySelector("[name=Q]");
    queButton.addEventListener("click", function() {
            document.getElementById("Q").play();
    });    

    queButton.addEventListener("keydown", function(e) {
            if (e.key == 81) {
                document.getElementById("Q").play();
            }
    });

Dacre Denny · Accepted Answer · 2019-09-27 03:16:07Z

2

Because audio playback only occurs when a specific key is pressed, it's not possible to share the entire event handler between both the click and keydown events.

It is however possible to define a reusable function (ie playSoundQ()) that is called for both events as shown below:

/* Define reusable play sound function for both events */
function playSoundQ() {
  document.getElementById("Q").play();
}

const qButton = document.querySelector("[name=Q]");
/* It's possible to pass the playSoundQ directly as the event handler
here, seeing there's no additional logic in the event handler */
qButton.addEventListener("click", playSoundQ);

/* Add keydown event listener to document rather than button */
document.addEventListener("keydown", function(e) {

  /* Change to keyCode */
  if (e.keyCode == 81) {
    playSoundQ();
  }
});

<audio id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"></audio>
<div>
  <button name="Q">Q</button>
</div>

Note also that a few fixes have been applied here; the keydown listener is added to the document rather than the button to ensure key based playback is reponsive to all key events that occur in the browser. The e.key in your keydown handler has also been corrected to e.keyCode to ensure that playback happens when the "Q" key is pressed.

Hope that helps!

answered Sep 27, 2019 at 3:16

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

1 Comment

Dacre Denny Over a year ago

@user6642297 please consider accepting the answer if it has been helpful by clicking the grey tick next to the answer

Collectives™ on Stack Overflow

how we can add two event listeners click and keydown in javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related