why am i getting null value eve if i press 'asdfghjkl'?

Question

window.addEventListener('keydown',function(e){
    const audio = document.querySelector(`audio[data-key=${e.code}]`)
    console.log(audio);
});

<div class="keys">
        <div data-key="keyA" class="key">
            <kbd>A</kbd>
            <span>clap</span>
        </div>
        <div data-key="keys" class="key">
            <kbd>S</kbd>
            <span>hihat</span>
        </div>
        <div data-key="keyD" class="key">
            <kbd>D</kbd>
            <span>kick</span>
        </div>
        <div data-key="keyF" class="key">
            <kbd>F</kbd>
            <span>openhat</span>
        </div>
        <div data-key="keyG" class="key">
            <kbd>G</kbd>
            <span>boom</span>
        </div>
        <div data-key="keyH" class="key">
            <kbd>H</kbd>
            <span>ride</span>
        </div>
        <div data-key="keyJ" class="key">
            <kbd>J</kbd>
            <span>snare</span>
        </div>
        <div data-key="keyK" class="key">
            <kbd>K</kbd>
            <span>tom</span>
        </div>
        <div data-key="keyL" class="key">
            <kbd>L</kbd>
            <span>tink</span>
        </div>
</div>

<audio data-key="keyA" src="sounds/clap.wav"></audio>
<audio data-key="keyS" src="sounds/hihat.wav"></audio>
<audio data-key="keyD" src="sounds/kick.wav"></audio>
<audio data-key="keyF" src="sounds/openhat.wav"></audio>
<audio data-key="keyG" src="sounds/boom.wav"></audio>
<audio data-key="keyH" src="sounds/ride.wav"></audio>
<audio data-key="keyJ" src="sounds/snare.wav"></audio>
<audio data-key="keyK" src="sounds/tom.wav"></audio>
<audio data-key="keyL" src="sounds/tink.wav"></audio>

i was following the this tutorial and noticed that keyCode is deprecated and i changed it to code which i think should print it on console when i press "asdfghjkl" value but it gives me null value.

Answer 1

Your case doesn't match. To fix you could convert the first letter to lower case:

window.addEventListener('keydown',function(e){
    const audio = document.querySelector(`audio[data-key=${e.code.replace(/^./, c => c.toLowerCase())}]`)
    console.log(audio);
});

<div class="keys">
        <div data-key="keyA" class="key">
            <kbd>A</kbd>
            <span>clap</span>
        </div>
        <div data-key="keys" class="key">
            <kbd>S</kbd>
            <span>hihat</span>
        </div>
        <div data-key="keyD" class="key">
            <kbd>D</kbd>
            <span>kick</span>
        </div>
        <div data-key="keyF" class="key">
            <kbd>F</kbd>
            <span>openhat</span>
        </div>
        <div data-key="keyG" class="key">
            <kbd>G</kbd>
            <span>boom</span>
        </div>
        <div data-key="keyH" class="key">
            <kbd>H</kbd>
            <span>ride</span>
        </div>
        <div data-key="keyJ" class="key">
            <kbd>J</kbd>
            <span>snare</span>
        </div>
        <div data-key="keyK" class="key">
            <kbd>K</kbd>
            <span>tom</span>
        </div>
        <div data-key="keyL" class="key">
            <kbd>L</kbd>
            <span>tink</span>
        </div>
</div>

<audio data-key="keyA" src="sounds/clap.wav"></audio>
<audio data-key="keyS" src="sounds/hihat.wav"></audio>
<audio data-key="keyD" src="sounds/kick.wav"></audio>
<audio data-key="keyF" src="sounds/openhat.wav"></audio>
<audio data-key="keyG" src="sounds/boom.wav"></audio>
<audio data-key="keyH" src="sounds/ride.wav"></audio>
<audio data-key="keyJ" src="sounds/snare.wav"></audio>
<audio data-key="keyK" src="sounds/tom.wav"></audio>
<audio data-key="keyL" src="sounds/tink.wav"></audio>