Question

我最近开始了第一个项目教程Make a JavaScript Drum Kit in Vanilla JS! #JavaScript30 1/30，作为Wes Bos的30天Javascript教程系列的一部分。我从Github克隆了the repository，所以当我开始观看教程时，我已经开始使用index-START.html文件了。

当他第一次开始在3:53标记处对代码进行更改时，他开始在脚本标记之间输入代码，如下所示：

`<script>
  window.addEventListener('keydown', function(e) {
    console.log(e);
  });
</script>
`

当他在Chrome浏览器中运行代码时输入＆＃34; d＆＃34;因为它是一个键盘鼓组，控制台反映出发生了一个事件。但是，当我输入完全相同的代码并试图按下＆＃34; d＆＃34;密钥我收到了通知：＆＃39;未捕获的ReferenceError：d未定义为：1：1＆＃39;。

我的问题是：

（1）因为我使用的是Atom代码编辑器，它可能与本教程中使用的代码编辑器不同，我注意到我的脚本标签是两种不同的颜色（我的开放式是米色，而我的关闭是蓝色）），代码编辑器的选择是否与我正确克隆此存储库的能力有关，还是没有什么区别？如果脚本标签是两种不同的颜色也会有所不同吗？

（2）我可以做些什么来解决这个问题，以便按下＆＃39; a＆＃39;已经从预设代码定义的行将导致＆＃39; keydown事件＆＃39;只给出了index-START.html文件提供的代码？

编辑：所有代码

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}
}

Answer 1

我的错误，我在控制台输入字母，而不是屏幕中发生事件的部分。出于这个原因，我收到了错误。

＆＃39;在Vanilla JS制作一个JavaScript Drum Kit！ #JavaScript30 1/30＆＃39;教程keydown事件没有注册

1 个答案: