'；用Vanilla JS制作一个JavaScript鼓包#JavaScript30 1/30'；教程按键关闭事件未注册_Javascript_Html

'；用Vanilla JS制作一个JavaScript鼓包#JavaScript30 1/30'；教程按键关闭事件未注册

javascript html

'；用Vanilla JS制作一个JavaScript鼓包#JavaScript30 1/30'；教程按键关闭事件未注册,javascript,html,Javascript,Html,我最近开始了第一个项目教程，作为WesBos的30天Javascript教程系列的一部分。我克隆了Github，因此在开始观看教程时，我开始使用index-START.html文件当他第一次开始在3:53标记处对代码进行更改时，他开始在脚本标记之间输入代码，如下所示： `<script> window.addEventListener('keydown', function(e) { console.log(e); }); </script> ` 我的

我最近开始了第一个项目教程，作为WesBos的30天Javascript教程系列的一部分。我克隆了Github，因此在开始观看教程时，我开始使用index-START.html文件

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

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

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

您必须粘贴代码。如果你不分享你所拥有的，我们就帮不了你。好吧，我会添加完整的代码。“d没有定义”-你确定有吗？您的代码中没有使用任何

变量。是的，它使用的是“d”的数字键码。这是其中一个数字。我有与运行教程的人完全相同的代码，它正在为他工作。

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

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