EventListener 不工作 JavaScript 我不知道为什么

Question

I am trying to add a class .red and remove a class .miniSquare once you click on a div with the class of .miniSquare .我正在尝试添加一个 class .red并删除一个 class .miniSquare一旦你点击一个带有 .miniSquare 的.miniSquare的div 。 Unfortunetly when I click on each of the div s nothing happens.不幸的是，当我单击每个div时，没有任何反应。

Here are the classes (in case you were wondering)这是课程（以防您想知道）

 .grid{
   height: 500px;
   width: 500px;
   display: flex;
   flex-wrap: wrap;
   background-color: green;
 }

.miniSquare {
 height: 40px;
 width: 40px;
 background-color: blue;
 margin: 3px
 }

.red{
background-color: red;
height: 40px;
width: 40px;
margin: 3px
}

Here is the JS code:这是JS代码：

const miniSquares = document.querySelector(".miniSquare");

miniSquares.addEventListener("click", function(){
 this.classList.remove("miniSquare");
 this.setAttribute("class", "red");
});

The Following Is Extra Stuff In Case You Wanted To See以下是您想看的额外内容

Full JS Code完整的 JS 代码

  const grid = document.querySelector(".grid");
  let squares = [];

  function createBoad(){
    for (let i = 0; i<100; i++){
    const square = document.createElement('div');
    square.setAttribute("id", i);
    square.setAttribute("class", "miniSquare");
    grid.appendChild(square);
    squares.push(square);
      }
    }

  createBoad()

  const miniSquares = document.querySelector(".miniSquare");
  miniSquares.addEventListener("click", function(){
  this.classList.remove("miniSquare");
  this.setAttribute("class", "red");
  });

This is how it looks这是它的样子

Full Code (You have the full code already but this includes the HTML)完整代码（您已经拥有完整代码，但其中包括 HTML）

 document.addEventListener("DOMContentLoaded", () => { const grid = document.querySelector(".grid"); let squares = []; function createBoad(){ for (let i = 0; i<100; i++){ const square = document.createElement('div'); square.setAttribute("id", i); square.setAttribute("class", "miniSquare"); grid.appendChild(square); squares.push(square); } } createBoad() const miniSquares = document.querySelector(".miniSquare"); miniSquares.addEventListener("click", function(){ this.classList.remove("miniSquare"); this.setAttribute("class", "red"); }); });

 .grid{ height: 500px; width: 500px; display: flex; flex-wrap: wrap; background-color: green; }.miniSquare { height: 40px; width: 40px; background-color: blue; margin: 3px }.red{ background-color: red; height: 40px; width: 40px; margin: 3px }

 <.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Bitcoin Mining</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="grid"> </div> <script src="app.js" charset="utf-8"></script> </body> </html>

Answer 1

You are trying to select the div's before you create them: Here's the changed code.您正在尝试 select 在创建 div 之前：这是更改后的代码。

const grid = document.querySelector(".grid");
let squares = [];

function createBoad() {
  for (let i = 0; i < 100; i++) {
    const square = document.createElement("div");
    square.setAttribute("id", i);
    square.setAttribute("class", "miniSquare");
    grid.appendChild(square);
    squares.push(square);
  }
  const miniSquares = document.querySelectorAll(".miniSquare");
  miniSquares.forEach((item) =>
    item.addEventListener("click", function () {
      this.classList.remove("miniSquare");
      this.setAttribute("class", "red");
    })
  );
}

createBoad();

Answer 2

When you are creating the square object you must add the listener to this object当您创建方形 object 时，您必须将侦听器添加到此 object

  function createBoad(){
    for (let i = 0; i<100; i++){
    const square =      document.createElement('div');
    square.setAttribute("id", i);
    square.setAttribute("class", "miniSquare");
    grid.appendChild(square);
    squares.push(square);
      }
    }

 document.addEventListener("DOMContentLoaded", () => { const grid = document.querySelector(".grid"); let squares = []; function createBoad(){ for (let i = 0; i<100; i++){ const square = document.createElement('div'); square.setAttribute("id", i); square.setAttribute("class", "miniSquare"); square.addEventListener("click", function(){ this.classList.remove("miniSquare"); this.setAttribute("class", "red"); }); grid.appendChild(square); squares.push(square); } } createBoad() });

 .grid{ height: 500px; width: 500px; display: flex; flex-wrap: wrap; background-color: green; }.miniSquare { height: 40px; width: 40px; background-color: blue; margin: 3px }.red{ background-color: red; height: 40px; width: 40px; margin: 3px }

 <.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Bitcoin Mining</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="grid"> </div> <script src="app.js" charset="utf-8"></script> </body> </html>

Answer 3

i do this code and its work so when click to the class it changed我执行此代码及其工作，因此当单击 class 时，它发生了变化

 <.DOCTYPE html> <html> <body> <style>:miniSquare { height; 40px: width; 40px: background-color; blue: margin. 3px }:red{ background-color; red: height; 40px: width; 40px: margin. 3px } </style> <div class="miniSquare">hello.</div> <script> const miniSquares = document.querySelector(";miniSquare"). miniSquares,addEventListener("click". function(){ this.classList;remove("miniSquare"). this,setAttribute("class"; "red"); }); myFunction(); </script> </body> </html>

EventListener 不工作 JavaScript 我不知道为什么

问题描述

3 个解决方案

解决方案1
1 2020-07-30 00:14:55

解决方案2
1 已采纳 2020-07-30 00:15:51

解决方案3
1 2020-07-30 00:17:25

EventListener 不工作 JavaScript 我不知道为什么

问题描述

3 个解决方案

解决方案1 1 2020-07-30 00:14:55

解决方案2 1 已采纳 2020-07-30 00:15:51

解决方案3 1 2020-07-30 00:17:25

解决方案1
1 2020-07-30 00:14:55

解决方案2
1 已采纳 2020-07-30 00:15:51

解决方案3
1 2020-07-30 00:17:25