javascript - 收到错误“未捕获的类型错误:无法设置未定义的属性‘颜色’”
问题描述
每当我单击按钮时,我都会尝试将按钮文本的颜色更改为“白色”。但是单击按钮后,我收到错误“Uncaught TypeError: Cannot set property 'color' of undefined”。我尝试使用 console.log(this) 提取对象,但它没有返回我单击的按钮对象,而是返回“窗口”类型的对象。我不明白为什么我无法访问按钮并选择其中的文本并更改颜色。我正在粘贴我的 html 和 js 代码。请让我知道哪里出错了.
for (var i = 0; i < (document.querySelectorAll('.drum').length); i++) {
document.querySelectorAll(".drum")[i].addEventListener("click", () => {
this.style.color = "white";
});
}
body {
text-align: center;
background-color: #283149;
}
h1 {
font-size: 5rem;
color: #DBEDF3;
font-family: "Arvo", cursive;
text-shadow: 3px 0 #DA0463;
}
footer {
color: #DBEDF3;
font-family: sans-serif;
}
.w {
background-image: url(./images/tom1.png);
}
.a {
background-image: url(./images/tom2.png);
}
.s {
background-image: url(./images/tom3.png);
}
.d {
background-image: url(./images/tom4.png);
}
.j {
background-image: url(./images/snare.png);
}
.k {
background-image: url(./images/crash.png);
}
.l {
background-image: url(./images/kick.png);
}
.set {
margin: 10% auto;
}
.game-over {
background-color: red;
opacity: 0.8;
}
.pressed {
box-shadow: 0 3px 4px 0 #DBEDF3;
opacity: 0.5;
}
.red {
color: red;
}
.drum {
outline: none;
border: 10px solid #404B69;
font-size: 5rem;
font-family: 'Arvo', cursive;
line-height: 2;
font-weight: 900;
color: #DA0463;
text-shadow: 3px 0 #DBEDF3;
border-radius: 15px;
display: inline-block;
width: 150px;
height: 150px;
text-align: center;
margin: 10px;
background-color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Drum Kit</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>
<body>
<h1 id="title">Drum Kit</h1>
<div class="set">
<button class="w drum">w</button>
<button class="a drum">a</button>
<button class="s drum">s</button>
<button class="d drum">d</button>
<button class="j drum">j</button>
<button class="k drum">k</button>
<button class="l drum">l</button>
</div>
<script src="index.js"></script>
</body>
</html>
解决方案
这是因为您使用了不绑定的箭头功能this
,请参阅w3c:
对于箭头函数,this 关键字始终表示定义箭头函数的对象。
function() {}
如果要绑定,只需使用通常的this
:
for (var i = 0; i < (document.querySelectorAll('.drum').length); i++) {
document.querySelectorAll(".drum")[i].addEventListener("click", function() {
console.log(this.innerHTML);
});
}
body {
text-align: center;
background-color: #283149;
}
h1 {
font-size: 5rem;
color: #DBEDF3;
font-family: "Arvo", cursive;
text-shadow: 3px 0 #DA0463;
}
footer {
color: #DBEDF3;
font-family: sans-serif;
}
.w {
background-image: url(./images/tom1.png);
}
.a {
background-image: url(./images/tom2.png);
}
.s {
background-image: url(./images/tom3.png);
}
.d {
background-image: url(./images/tom4.png);
}
.j {
background-image: url(./images/snare.png);
}
.k {
background-image: url(./images/crash.png);
}
.l {
background-image: url(./images/kick.png);
}
.set {
margin: 10% auto;
}
.game-over {
background-color: red;
opacity: 0.8;
}
.pressed {
box-shadow: 0 3px 4px 0 #DBEDF3;
opacity: 0.5;
}
.red {
color: red;
}
.drum {
outline: none;
border: 10px solid #404B69;
font-size: 5rem;
font-family: 'Arvo', cursive;
line-height: 2;
font-weight: 900;
color: #DA0463;
text-shadow: 3px 0 #DBEDF3;
border-radius: 15px;
display: inline-block;
width: 150px;
height: 150px;
text-align: center;
margin: 10px;
background-color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Drum Kit</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>
<body>
<h1 id="title">Drum Kit</h1>
<div class="set">
<button class="w drum">w</button>
<button class="a drum">a</button>
<button class="s drum">s</button>
<button class="d drum">d</button>
<button class="j drum">j</button>
<button class="k drum">k</button>
<button class="l drum">l</button>
</div>
<script src="index.js"></script>
</body>
</html>
推荐阅读
- css - 你怎么能设置一个material-ui表来有统一的边框厚度?
- ios - 什么是 iOS 应用程序的“开发签名版本”?如何运行我的应用程序的开发签名版本?
- android - com.android.builder.dexing.DexArchiveMergerException:无法在离子 5 中合并 dex
- python - 模块 pandas 没有属性“day_name”
- r - R blogdown::serve_site() 使用 Hugo“gesquive/slate”主题时不生成“公共”文件夹
- hash - 如何在 gperf 中使用空字节?
- powershell - 重命名大量子文件夹中的文件
- python - 熊猫数据框打印到没有列名的控制台
- django - Django 频道无法连接
- angular - Spring Security 配置和 Angular 登录问题