CODEWITHSUNDEEP
javascriptdom-events
Munaf Hajir
Munaf Hajir

Reputation: 67

On Keydown Event It should play matching audio

In this code, when keyboard event A was pressed its keycode 65 should match the audio tag's attribute data-key = "65" and play. But when I querySelector it returning me null in console log.

<html>
    <head>
        <title>Drumkit</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale = 1.0"> 
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <audio data-key="65" src="audio/clap.wav"></audio>
        <audio data-key="83" src="audio/hihat.wav"></audio>
        <audio data-key="68" src="audio/kick.wav"></audio>
        <audio data-key="70" src="audio/openhat.wav"></audio>
        <audio data-key="71" src="audio/boom.wav"></audio>
        <audio data-key="72" src="audio/ride.wav"></audio>
        <audio data-key="74" src="audio/snare.wav"></audio>
        <audio data-key="75" src="audio/tom.wav"></audio>
        <audio data-key="76" src="audio/tink.wav"></audio>
      
        <script>
            window.addEventListener('keydown',function(e){
            const audio = document.querySelector('audio[data-key="${e.keyCode}"]');
           
            
            console.log(audio);
            });

        </script>
    </body>
</html>

Upvotes: 2

Views: 65

Answers (2)

geeksal
geeksal

Reputation: 5016

As pointed out by @CodeF0x you need to use ES6 template string. Hence you need to use backticks or backquote ` instead of single quotes ' which can be found on the key below esc key

However, the string will not properly interpolate in the function call arguments in your case the querySelector() function.

Hence store your template string output in a variable and pass this variable in the function call and this will solve your problem.

Just Use Like This

<html>
    <head>
        <title>Drumkit</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale = 1.0">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <audio data-key="65" src="audio/clap.wav"></audio>
        <audio data-key="83" src="audio/hihat.wav"></audio>
        <audio data-key="68" src="audio/kick.wav"></audio>
        <audio data-key="70" src="audio/openhat.wav"></audio>
        <audio data-key="71" src="audio/boom.wav"></audio>
        <audio data-key="72" src="audio/ride.wav"></audio>
        <audio data-key="74" src="audio/snare.wav"></audio>
        <audio data-key="75" src="audio/tom.wav"></audio>
        <audio data-key="76" src="audio/tink.wav"></audio>

        <script>
            window.addEventListener('keydown',function(e){
            var selector = `audio[data-key="${e.keyCode}"]`;
            const audio = document.querySelector(selector);

            console.log(audio);
            });

        </script>
    </body>
</html>

Output: As you wanted

enter image description here

Please refer Getting Literal With ES6 Template Strings for more help

Upvotes: 0

CodeF0x
CodeF0x

Reputation: 2682

For using ES6 a Template-String, you need to use ` instead of '.

You may also want read this documentation.

<html>
    <head>
        <title>Drumkit</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale = 1.0"> 
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <audio data-key="65" src="audio/clap.wav"></audio>
        <audio data-key="83" src="audio/hihat.wav"></audio>
        <audio data-key="68" src="audio/kick.wav"></audio>
        <audio data-key="70" src="audio/openhat.wav"></audio>
        <audio data-key="71" src="audio/boom.wav"></audio>
        <audio data-key="72" src="audio/ride.wav"></audio>
        <audio data-key="74" src="audio/snare.wav"></audio>
        <audio data-key="75" src="audio/tom.wav"></audio>
        <audio data-key="76" src="audio/tink.wav"></audio>
      
        <script>
            window.addEventListener('keydown',function(e){
            const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
           
            
            console.log(audio);
            });

        </script>
    </body>
</html>

Upvotes: 2

Related Questions