addEventListener 未触发

Question

我尝试了不同的方法，但 addEventListener 仍然无法正常工作。 这是 Html 代码：

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


  <script src="index.js" charset="utf-8"></script>
</body>

</html>

和 Javascript 代码：

var n = document.querySelectorAll(".drum").length;
var i = 0;
while(i <n){

    document.querySelectorAll(".drum")[i].addEventListener("click", function () {
        console.log("clicked");
        alert("clicked!");

  });
  i++;
}

帮我解决这个问题。 谢谢你

Answer 1

如果您的代码在您的 LOCAL 上不起作用，那么您的代码工作正常，然后确保您的 JS 文件附加到您的 HTML 文件。 检查控制台是否有错误，如果有任何错误，请告诉我它是什么？ 是 404 还是其他什么。

当您实现下面的脚本标签时，您的 HTML 和 JS 文件需要位于同一文件夹中。

 var n = document.querySelectorAll(".drum").length; var i = 0; while(i <n){ document.querySelectorAll(".drum")[i].addEventListener("click", function () { console.log("clicked"); alert("clicked;"); }); i++; }

 <.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> </div> </body> </html>

你应该试试

client = new WebSocket("ws://localhost:8000/");

或在此处准备此线程。

addEventListener 未触发

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-17 11:06:41

addEventListener 未触发

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-17 11:06:41

解决方案1
0 已采纳 2020-05-17 11:06:41