我最近开始了第一个项目教程用VanillaJS制作JavaScript Drum Kit#JavaScript30 1/30作为Wes Bos的30天Javascript教程系列的一部分。我从Github中克隆了存储库，所以当我开始看教程时，我已经从index-START.html文件开始了。
当他第一次在3:53开始对代码进行更改时，他开始在脚本标记之间输入代码，如下所示：
`<script>
window.addEventListener('keydown', function(e) {
console.log(e);
});
</script>
`
当他在chrome浏览器中通过键入"d"键来运行代码时，因为这是一个键盘鼓点，控制台反映出发生了一个事件。然而，当我输入了完全相同的代码并尝试按"d"键时，我收到了通知："未捕获的引用错误：d未在1:1处定义"。
我的问题是：
(1) 因为我使用的Atom代码编辑器可能与教程中使用的代码编辑器不同，而且我注意到我的脚本标记是两种不同的颜色(打开的是米色，关闭的是蓝色)，所以代码编辑器的选择与我正确克隆此存储库的能力有关吗？另外，如果脚本标签是两种不同的颜色，会有区别吗？
(2) 我能做些什么来解决这个问题，以便在给定index-START.html文件中可用的代码的情况下，沿着"a"行按字母顺序的字母(已经从预设代码中定义)将导致"keydown事件"？
编辑：所有代码
HTML-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>
<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>
<script>
window.addEventListener('keydown', function (e) {
console.log(e.keyCode);
});
</script>
</body>
</html>
CSS：
body{
font-family:"Arial", Serif;
background-color: #f4f4f4;
overflow-x:hidden;
}
.navbar{
background-color:#3b5998;
overflow:hidden;
height:63px;
}
.navbar a{
float:left;
display:block;
color:#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar ul{
margin:8px 0 0 0;
list-style:none;
}
.navbar a:hover{
background-color:#ddd;
color:#000;
}
.side-nav{
height:100%;
width:0;
position:fixed;
z-index:1;
top:0;
left:0;
background-color:#111;
opacity:0.9;
overflow-x:hidden;
padding-top:60px;
transition:0.5s;
}
.side-nav a{
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size:22px;
color: #ccc;
display:block;
transition:0.3s;
}
.side-nav a:hover{
color:#fff;
}
.side-nav .btn-close{
postion:absolute;
top:0;
right:22px;
font-size:36px;
margin-left:50px;
}
# main {
transition:margin-left 0.5s;
padding: 20px;
overflow:hidden;
width:100%;
}
@media(max-width: 568px){
.navbar-nav{display:none}
}
我的错误是，我在控制台中输入字母，而不是在屏幕上发生事件的部分。由于这个原因，我收到了错误。