为何调换代码顺序会触发Uncaught TypeError: Cannot read property 'add'错误？

别担心，新手遇到这类小问题太正常啦😉，咱们一步步拆解你的问题：

核心错误原因 #

你碰到的 Uncaught TypeError: Cannot read property 'add' 报错，本质是属性名大小写写错了：
DOM元素操作类名的标准属性是 classList（注意字母L是大写的），但你在第一段代码里写成了小写的 classlist——这个属性根本不存在，所以调用.add()方法时就会报错，因为key.classlist是undefined。

为什么调换顺序后好像“正常”？ #

其实代码顺序不是关键，大概率是你调换代码的时候，不小心把classlist改成了正确的classList（或者刚好某些场景下没触发到这段报错代码）。不信你再仔细核对下第二段能运行的代码，肯定是写对了classList。

另外补充一个小细节：你的判断逻辑只检查了audio是否存在，但如果页面上有对应data-key的audio，却没有对应的div元素时，key会是null，这时候调用key.classList.add()也会报错。可以把判断逻辑改成同时检查两者，更严谨：

if (!audio || !key) return;

修正后的完整代码 #

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
// 同时检查audio和key是否存在，避免后续报错
if (!audio || !key) return;
audio.currentTime = 0;
audio.play();
console.log(key);
// 注意这里是大写L的classList
key.classList.add('playing');

内容的提问来源于stack exchange，提问作者k-my28