鼠标悬停事件监听器不改变网格颜色 item/div

Question

这里有点 JavaScript 菜鸟。我正在对一个项目使用 DOM 操作，并且需要进行操作以便我的容器中的网格项在悬停后改变颜色。为什么我的 hoverColor() 函数 不执行任何操作？我认为这是我的“网格项目”class 无法正常工作的问题。

我还没有调整容器大小选项，只是想让事件侦听器先工作。

//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,0,0.19), 0 5px 5px rgba(0,0,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>

Answer 1

试试这个。

你犯过的错误：

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

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

默认情况下，在 hoverColor 函数中，您将收到一个 Event($event) 对象（在您的示例中为 MouseEvent）。在多个属性中，事件对象将有一个引用您的元素的目标属性。然后，您可以将 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);

Answer 2

您的代码有两个问题：

最根本的是，您忘记调用 randomColor 函数。您试图将函数值本身字符串化为 CSS 颜色值，但这是行不通的。 randomColor() 是您想要的，颜色 由函数返回 。
您的函数只适用于第一个网格项，因为您使用的是 querySelector, which only selects the first HTML element in the collection of matched elements. You instead want to use querySelectorAll，并遍历集合，为每个项添加事件侦听器。

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

//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 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,0,0.19), 0 5px 5px rgba(0,0,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>

Answer 3

我已经找到解决您问题的方法

//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 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, 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,0,0.19), 0 5px 5px rgba(0,0,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>

我改变了什么

`querySelector()`

querySelector() 到 querySelectorAll().

querySelector() 将仅 select 它在文档中找到的第一个元素 querySelectorAll() 将 select 文档中具有该 selector 的每个元素。

`randomColor`

randomColor 到 randomColor()

randomColor 将 return 函数 randomColor() 将运行函数。

添加了一个 `for` 循环

for 循环向具有 class 名称的所有元素添加一个事件侦听器 .grid-item。

鼠标悬停事件监听器不改变网格颜色 item/div

On mouseover Event Listener not changing color of grid item/div

javascript

html

css

mouseover

event-listener

我改变了什么

`querySelector()`

`randomColor`

添加了一个 `for` 循环

鼠标悬停事件监听器不改变网格颜色 item/div

On mouseover Event Listener not changing color of grid item/div

javascript

html

css

mouseover

event-listener

我改变了什么

querySelector()

randomColor

添加了一个 for 循环

`querySelector()`

`randomColor`

添加了一个 `for` 循环