stackoom
  简体   繁体   中英

EventListener not working JavaScript and I don't know why

 原文  2020-07-30 00:05:58  1   3    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 . Unfortunetly when I click on each of the div s nothing happens.

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:

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

  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) 

 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>

3 answers

solution1
 1  2020-07-30 00:14:55

You are trying to select the div's before you create them: Here's the changed code.

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();

solution2
 1 ACCPTED  2020-07-30 00:15:51

When you are creating the square object you must add the listener to this 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>

solution3
 1  2020-07-30 00:17:25

i do this code and its work so when click to the class it changed

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question HTML and JavaScript, no output from javascript, i don't know why? my geolocation(javascript) does not work and I don't know why react Suspense is not working and i don't know why I don't know why this class is not adding through javascript If a change a Javascript string links on a page don't work, and I don't know why? resizeBy not working and don't know why jquery validation is not working don't know why Ajax is not working (don't know why) Just not working, don't know why Don't know why Polymer is not working
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM