使用e.code替代已废弃keyCode后，按下asdfghjkl返回null的问题

问题原因 #

出现console.log(audio)输出null的情况，有两个核心原因：

1. 大小写不匹配：按下按键时e.code的实际值是KeyA/KeyS这类首字母大写的格式，但你HTML中data-key的值是keyA/keyS（首字母小写），选择器无法匹配到对应元素。
2. HTML拼写错误：S键对应的<div>元素data-key被误写为keys，正确应该是keyS。

修正方案 #

方案1：修改JavaScript代码适配现有HTML格式

通过字符串转换统一e.code和data-key的格式，同时给选择器的属性值添加引号避免语法问题：

window.addEventListener('keydown', function(e){
    // 将e.code的首字母转为小写，匹配HTML中的data-key格式
    const targetKey = e.code.replace(/^./, char => char.toLowerCase());
    const audio = document.querySelector(`audio[data-key="${targetKey}"]`);
    console.log(audio);
});

方案2：修改HTML的data-key值匹配e.code格式

把所有元素的data-key改为和e.code一致的首字母大写格式，同时修正S键的拼写错误：

<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/KeyF/KeyG...格式 -->
</div>

<audio data-key="KeyA" src="sounds/clap.wav"></audio>
<audio data-key="KeyS" src="sounds/hihat.wav"></audio>
<!-- 其余audio元素的data-key同步改为KeyD/KeyF/KeyG...格式 -->

对应的JavaScript代码可以直接使用e.code查询：

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

内容的提问来源于stack exchange，提问作者Shaveen Perera