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

编程问答 2022-08-23

问题描述

这里有一个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);
,

您的代码有两个问题：

  1. 从根本上讲，您忘记了调用randomColor函数。您试图将函数值本身字符串化为CSS颜色值，但从未使用过。 randomColor()正是您想要的，该功能通过颜色返回。

  2. 您的函数将仅在第一个网格项目上起作用，因为您使用的是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的所有元素中。

event-listenerhtmljavascriptmouseover

相关问答

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd impor...
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：...
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon:...
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Alt...
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirem...