Search code examples
javascripthtmldom-eventskeycode

Event Javascript with sound when I press a key

I use datakey to make a sound when I press a touch.

Can you explain why my code doesn't work?

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>day1 javascript</title>    
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="minireset.css">
    </head>

    <body>

        <div class="keys">
            <div class="key" data-key="65"><kbd>A</kbd><span class="sound"><br/>Clap</span></div>
            <div class="key" data-key="90"><kbd>Z</kbd></div>
            <div class="key" data-key="69"><kbd>E</kbd></div>
            <div class="key" data-key="82"><kbd>R</kbd></div>
            <div class="key" data-key="84"><kbd>T</kbd></div>
            <div class="key" data-key="89"><kbd>Y</kbd></div>
            <div class="key" data-key="85"><kbd>U</kbd></div>
            <div class="key" data-key="73"><kbd>I</kbd></div>
            <div class="key" data-key="79"><kbd>O</kbd></div>
            <div class="key" data-key="80"><kbd>P</kbd></div>
        </div>

        <audio data-key="65" src="sound/clap.wav"></audio>

        <script>
            window.addEventListener('keydown', function(e){
                var key=e.keyCode;
                const audio = document.querySelector('audio[data-key=' +key+']');
                if (!audio)  return;

                audio.play();
            });

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

I have this error:

index.html:30 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'audio[data-key=65]' is not a valid selector.

Solution

  • You need add extra quotes like this:

    document.querySelector('audio[data-key="' +key+'"]')