addEventListener 未触发答案

【问题标题】：addEventListener not triggeringaddEventListener 未触发
【发布时间】：2020-09-03 03:18:25
【问题描述】：

我尝试了不同的方法，但 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++;
}

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

【问题讨论】：

您好，用正确的路径正确链接脚本文件。引用此脚本标签并在 src <script type="text/javascript" src=""></script> 中添加您自己的路径
您的代码运行良好。我删除了警报并将 classList 添加到 console.log

标签： javascript html addeventlistener

【解决方案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/");

或准备好这个thread here.

【讨论】：

是的，这两个文件都在同一个目录中。
1 错误处理响应：错误：无法构造“WebSocket”：URL 'ws/ws' 无效。 DevTools 无法加载 SourceMap：无法加载 chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map 的内容：HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME DevTools 无法加载 SourceMap：无法加载 chrome 的内容-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map：HTTP 错误：状态码 404，net::ERR_UNKNOWN_URL_SCHEME
你的JS代码没问题，我想这对你有帮助，stackoverflow.com/questions/38604346/…
如果对你有帮助，别忘了标记正确答案并点赞。