Javascript 获取错误“；未捕获类型错误：无法设置属性'；颜色'；“未定义”的定义；

每当我点击按钮时，我试图将按钮文本的颜色更改为“白色”。但单击按钮后，我得到错误“Uncaught TypeError:无法设置未定义的属性'color'。我尝试使用console.log（此）提取对象，但它没有返回我单击的按钮的对象，而是返回类型为“window”的对象。我无法理解为什么我无法访问按钮并选择其中的文本并更改颜色。我正在粘贴html和js代码。请告诉我哪里出了问题

for（var i=0；i<（document.queryselectoral（'.drum'）.length）；i++）{
document.queryselectoral（“.drum”）[i].addEventListener（“单击”，（）=>{
this.style.color=“白色”；
});
}

正文{
文本对齐：居中；
背景色：#283149；
}
h1{
字体大小：5rem；
颜色：#DBEDF3；
字体系列：“Arvo”，草书；
文本阴影：3px0#DA0463；
}
页脚{
颜色：#DBEDF3；
字体系列：无衬线；
}
w{
背景图片：url（./images/tom1.png）；
}
.a{
背景图片：url（./images/tom2.png）；
}
s{
背景图片：url（./images/tom3.png）；
}
博士{
背景图片：url（./images/tom4.png）；
}
j{
背景图片：url（./images/snare.png）；
}
k{
背景图片：url（./images/crash.png）；
}
l{
背景图片：url（./images/kick.png）；
}
.设置{
利润率：10%自动；
}
.比赛结束了{
背景色：红色；
不透明度：0.8；
}
.按{
盒影：0 3px 4px 0#DBEDF3；
不透明度：0.5；
}
瑞德先生{
颜色：红色；
}
.鼓{
大纲：无；
边框：10px实心#404B69；
字体大小：5rem；
字体系列：“Arvo”，草书；
线高：2；
字号：900；
颜色：#DA0463；
文本阴影：3px0#DBEDF3；
边界半径：15px；
显示：内联块；
宽度：150px；
高度：150像素；
文本对齐：居中；
利润率：10px；
背景色：白色；
}

鼓套件
鼓您得到
未定义
的原因是您正在使用箭头功能，
此
指的是
窗口
。解决方案是使用
event.target
代替
this

您可以使用匿名函数代替箭头函数，并在其中使用
this
来实现同样的效果


var all=document.queryselectoral（“.drum”）；
对于（变量i=0；i{
log（event.target.innerHTML）；
event.target.style.color=“#fff”；
});
}
正文{
文本对齐：居中；
背景色：#283149；
}
h1{
字体大小：5rem；
颜色：#DBEDF3；
字体系列：“Arvo”，草书；
文本阴影：3px0#DA0463；
}
页脚{
颜色：#DBEDF3；
字体系列：无衬线；
}
w{
背景图片：url（./images/tom1.png）；
}
.a{
背景图片：url（./images/tom2.png）；
}
s{
背景图片：url（./images/tom3.png）；
}
博士{
背景图片：url（./images/tom4.png）；
}
j{
背景图片：url（./images/snare.png）；
}
k{
背景图片：url（./images/crash.png）；
}
l{
背景图片：url（./images/kick.png）；
}
.设置{
利润率：10%自动；
}
.比赛结束了{
背景色：红色；
不透明度：0.8；
}
.按{
盒影：0 3px 4px 0#DBEDF3；
不透明度：0.5；
}
瑞德先生{
颜色：红色；
}
.鼓{
大纲：无；
边框：10px实心#404B69；
字体大小：5rem；
字体系列：“Arvo”，草书；
线高：2；
字号：900；
颜色：#DA0463；
文本阴影：3px0#DBEDF3；
边界半径：15px；
显示：内联块；
宽度：150px；
高度：150像素；
文本对齐：居中；
利润率：10px；
背景色：白色；
}

鼓这是因为您使用的箭头函数不绑定此
，请参阅：

对于箭头函数，此关键字始终表示定义箭头函数的对象

如果要绑定
this
，只需使用常用的
函数（）{}
：


for（var i=0；i<（document.queryselectoral（'.drum'）.length）；i++）{
document.queryselectoral（“.drum”）[i].addEventListener（“单击”，函数（）{
log（this.innerHTML）；
});
}
正文{
文本对齐：居中；
背景色：#283149；
}
h1{
字体大小：5rem；
颜色：#DBEDF3；
字体系列：“Arvo”，草书；
文本阴影：3px0#DA0463；
}
页脚{
颜色：#DBEDF3；
字体系列：无衬线；
}
w{
背景图片：url（./images/tom1.png）；
}
.a{
背景图片：url（./images/tom2.png）；
}
s{
背景图片：url（./images/tom3.png）；
}
博士{
背景图片：url（./images/tom4.png）；
}
j{
背景图片：url（./images/snare.png）；
}
k{
背景图片：url（./images/crash.png）；
}
l{
背景图片：url（./images/kick.png）；
}
.设置{
利润率：10%自动；
}
.比赛结束了{
背景色：红色；
不透明度：0.8；
}
.按{
盒影：0 3px 4px 0#DBEDF3；
不透明度：0.5；
}
瑞德先生{
颜色：红色；
}
.鼓{
大纲：无；
边框：10px实心#404B69；
字体大小：5rem；
字体系列：“Arvo”，草书；
线高：2；
字号：900；
颜色：#DA0463；
文本阴影：3px0#DBEDF3；
边界半径：15px；
显示：内联块；
宽度：150px；
高度：150像素；
文本对齐：居中；
利润率：10px；
背景色：白色；
}

鼓套件
鼓没有显示试图设置
color
属性的代码，因此此代码不是一个好代码。请显示运行时再现您所询问的错误的代码。请注意，最好将对
document.querySelectorAll（“.drum”）
的响应缓存在一个变量中，然后对该变量进行迭代。@HereticMonkey尝试运行该代码段。。它工作正常，问题将重现。我运行了该代码段，没有看到错误“Uncaught TypeError:无法设置未定义的属性“color”哦，是的！！我看到我没有保存我所做的更改，所以它只是显示未定义。请看现在它显示t