试图在事件上改变颜色，颜色不会可靠地改变
[英]Trying to change color on event, color won't change reliably
问题描述
In the code below, I want the color of the cells on mouseover to change according to the button pressed.
在下面的代码中，我希望鼠标悬停时单元格的颜色根据按下的按钮而改变。
However, when I click on a color button it changes once and then works maybe sometimes if I click a weird combination of colors.但是，当我单击颜色按钮时，它会更改一次，然后如果我单击奇怪的颜色组合，有时可能会起作用。
For example, I can click blue, then red, green, yellow and it works as intended.例如，我可以单击蓝色，然后单击红色、绿色、黄色，然后按预期工作。 If I want to change to green it doesn't change at all.如果我想变成绿色，它根本不会改变。 But sometimes it works if I want to change to blue.但有时如果我想更改为蓝色，它会起作用。 Why does this happen?为什么会发生这种情况？
function drawPictureBlue(e) { e.target.style.backgroundColor = '#3500D3'; } function drawPictureRed(e) { e.target.style.backgroundColor = 'red'; } function drawPictureGreen(e) { e.target.style.backgroundColor = 'green'; } function drawPictureYellow(e) { e.target.style.backgroundColor = 'yellow'; } const cells = document.querySelectorAll('.cell'); const blueColor = document.querySelector('.blue') const redColor = document.querySelector('.red'); const greenColor = document.querySelector('.green'); const yellowColor = document.querySelector('.yellow'); //cells.forEach(cell => cell.addEventListener('mouseover', drawPictureDefault)); blueColor.addEventListener('click', function() { cells.forEach(cell => cell.addEventListener('mouseover', drawPictureBlue)); cells.forEach(cell => cell.removeEventListener('mouseover', drawPictureRed, drawPictureGreen, drawPictureYellow)); }) redColor.addEventListener('click', function() { cells.forEach(cell => cell.addEventListener('mouseover', drawPictureRed)); cells.forEach(cell => cell.removeEventListener('mouseover', drawPictureBlue, drawPictureGreen, drawPictureYellow)); }) greenColor.addEventListener('click', function() { cells.forEach(cell => cell.addEventListener('mouseover', drawPictureGreen)); cells.forEach(cell => cell.removeEventListener('mouseover', drawPictureBlue, drawPictureRed, drawPictureYellow)); }) yellowColor.addEventListener('click', function() { cells.forEach(cell => cell.addEventListener('mouseover', drawPictureYellow)); cells.forEach(cell => cell.removeEventListener('mouseover', drawPictureBlue, drawPictureRed, drawPictureGreen)); })
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <div id='header'></div> <div id='box'> <div id='btnArea'> <button class='clearBtn'></button> </div> <div id='container'></div> <div id='optionsArea'> <div class='options'></div> <button class='blue'>Blue</button> <button class='red'>Red</button> <button class='green'>Green</button> <button class='yellow'>Yellow</button> </div> </div> </body> </html>```
2 个解决方案
解决方案1
0 已采纳 2021-07-13 15:47:53
read my comments阅读我的评论
function drawPictureBlue(e) {
e.target.style.backgroundColor = '#3500D3';
}
function drawPictureRed(e) {
e.target.style.backgroundColor = 'red';
}
function drawPictureGreen(e) {
e.target.style.backgroundColor = 'green';
}
function drawPictureYellow(e) {
e.target.style.backgroundColor = 'yellow';
}
const cells = [...document.querySelectorAll('.cell')];
const blueColor = document.querySelector('.blue')
const redColor = document.querySelector('.red');
const greenColor = document.querySelector('.green');
const yellowColor = document.querySelector('.yellow');
//cells.forEach(cell => cell.addEventListener('mouseover', drawPictureDefault));
blueColor.addEventListener('click', function() {
cells.forEach(cell => cell.mouseover=drawPictureBlue);
})
redColor.addEventListener('click', function() {
cells.forEach(cell => cell.mouseover=drawPictureRed);
})
greenColor.addEventListener('click', function() {
cells.forEach(cell => cell.mouseover=drawPictureGreen);
})
yellowColor.addEventListener('click', function() {
cells.forEach(cell => cell.mouseover=drawPictureYellow);
})
解决方案2
-1 2021-07-13 15:39:18
I don't see the html part of your code, but if I would have to guess - the reason why some times it doesn't work is because you are not clicking on the desired element that you want to change.我没有看到您的代码的 html 部分，但如果我不得不猜测 - 有时它不起作用的原因是因为您没有单击要更改的所需元素。
try using e.target.closest(<selector to change color>).style .. and it may solve the problem尝试使用e.target.closest(<selector to change color>).style ..它可能会解决问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.