如何解决在鼠标悬停时，事件侦听器不会更改网格项目/ div的颜色

这里有一个JavaScript noob。我正在对项目使用DOM操作，因此需要进行操作，以便将容器中的网格项悬停在其上后更改颜色。为什么我的 hoverColor（）函数不做任何事情？我认为这是我的“网格项”类无法正常工作的问题。

我还没有调整容器大小的选项，只是试图让事件监听器首先工作。

//query selectors
const container = document.querySelector('#container');


//Function that creates GRID
function addDivs(rows,cols){
    container.style.setProperty('--grid-rows',rows);
    container.style.setProperty('--grid-cols',cols);
    for (i = 0; i < (rows * cols); i++){
      let square = document.createElement("div");
      square.classList.add('grid-item');
      container.appendChild(square);
    }
  hoverColor();
}

//function that creates a random color
let randomColor = function() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

//function that changes div color uponed being hovered
function hoverColor() {
  let item = document.querySelector('.grid-item');
  item.addEventListener('mouseover',() => {
    item.style.backgroundColor = `${randomColor()}`;
  });
}

//grid creationg
addDivs(16,16);

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  grid-gap: 0.5em;
  grid-template-rows: repeat(var(--grid-rows),1fr);
  grid-template-columns: repeat(var(--grid-cols),1fr);
  border: 3px solid black;
  padding: 1em;
}

#container:hover {
  box-shadow: 0 5px 5px rgba(0,0.19),0 5px 5px rgba(0,0.23);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container"></div>
    <script src="script.js"></script>
  </body>
</html>

解决方法

尝试一下。

您犯的错误：

您必须将eventListener附加到每个元素。对于初学者，querySelector仅采用第一个元素。即使您确实使用querySelectorAll，也将获得一个NodeList（某种Element数组），您仍然需要循环遍历每个事件并将事件侦听器添加到每个侦听器。

在我的解决方案中，我只是在addDivs中存在的循环中创建它之后立即添加它。保存循环两次。然后，您可以像在示例中一样引用hoverColor函数。

在hoverColor函数中，默认情况下，您将收到一个Event（$ event）对象（在您的情况下为MouseEvent）。在多个属性中，Event对象将具有引用您的Element的target属性。然后，您可以将style.backgroundColor属性修改为您选择的颜色。希望这就是您想要的。

//query selectors
const container = document.querySelector('#container');


//Function that creates GRID
function addDivs(rows,cols){
    container.style.setProperty('--grid-rows',rows);
    container.style.setProperty('--grid-cols',cols);
    for (i = 0; i < (rows * cols); i++){
      let square = document.createElement("div");
      square.addEventListener('mouseover',hoverColor);
      square.classList.add('grid-item');
      container.appendChild(square);
    }
}

//function that creates a random color
let randomColor = function() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

//function that changes div color uponed being hovered
function hoverColor($event) {
  const item = $event.target;
  item.style.backgroundColor = `${randomColor()}`;
}

//grid creationg
addDivs(16,16);

您的代码有两个问题：

从根本上讲，您忘记了调用randomColor函数。您试图将函数值本身字符串化为CSS颜色值，但从未使用过。 randomColor()正是您想要的，该功能通过颜色返回。
您的函数将仅在第一个网格项目上起作用，因为您使用的是querySelector，它仅选择匹配元素集合中的第一个HTML元素。相反，您想使用querySelectorAll，并遍历集合，将事件侦听器添加到每个集合中。

请参见下面的工作示例，并进行了两个修复：

//query selectors
const container = document.querySelector('#container');


//Function that creates GRID
function addDivs(rows,cols);
    for (i = 0; i < (rows * cols); i++){
      let square = document.createElement("div");
      square.classList.add('grid-item');
      container.appendChild(square);
    }
  hoverColor();
}

//function that creates a random color
let randomColor = function() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

//function that changes div color uponed being hovered
function hoverColor() {
  let items = document.querySelectorAll('.grid-item');
  items.forEach(item => {
    item.addEventListener('mouseover',() => {
      item.style.backgroundColor = `${randomColor()}`;
    });
  });
}

//grid creationg
addDivs(16,16);

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  grid-gap: 0.5em;
  grid-template-rows: repeat(var(--grid-rows),1fr);
  grid-template-columns: repeat(var(--grid-cols),1fr);
  border: 3px solid black;
  padding: 1em;
}

#container:hover {
  box-shadow: 0 5px 5px rgba(0,0.19),0 5px 5px rgba(0,0.23);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container"></div>
    <script src="script.js"></script>
  </body>
</html>

我找到了解决您问题的方法

//query selectors
const container = document.querySelector('#container');


//Function that creates GRID
function addDivs(rows,cols);
    for (i = 0; i < (rows * cols); i++){
      let square = document.createElement("div");
      square.classList.add('grid-item');
      container.appendChild(square);
    }
  hoverColor();
}

//function that creates a random color
let randomColor = function() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

//function that changes div color uponed being hovered
function hoverColor() {
  let items = document.querySelectorAll('.grid-item'); // Get all the elements with .grid-item (not just the first one
  for (let i = 0; i < items.length; i++) { // Add for loop to add an event listener to all .grid-item elements
    items[i].addEventListener('mouseover',() => {
      items[i].style.backgroundColor = `${randomColor()}`; // randomColor function not being called 
                                                           // randomColor -> randomColor()
    });
  }
}

//grid creationg
addDivs(16,0.23);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container"></div>
    <script src="script.js"></script>
  </body>
</html>

我做了什么

`querySelector()`

querySelector()至querySelectorAll()。

querySelector()将仅选择它在文档中找到的第一个元素querySelectorAll()将使用该选择器选择文档中的每个元素。

`randomColor`

randomColor至randomColor()

randomColor将返回函数randomColor()将运行该函数。

添加了一个`for`循环

for循环将事件侦听器添加到类名称为.grid-item的所有元素中。

在鼠标悬停时，事件侦听器不会更改网格项目/ div的颜色

如何解决在鼠标悬停时，事件侦听器不会更改网格项目/ div的颜色

解决方法

我做了什么

querySelector()

randomColor

添加了一个for循环

相关推荐

`querySelector()`

`randomColor`

添加了一个`for`循环