时间戳

首页 > 解决方案 > 试图在事件中改变颜色，颜色不会可靠地改变

javascript - 试图在事件中改变颜色，颜色不会可靠地改变

问题描述

在下面的代码中，我希望鼠标悬停时单元格的颜色根据按下的按钮而改变。

但是，当我单击颜色按钮时，它会更改一次，然后有时如果我单击奇怪的颜色组合，它可能会起作用。

例如，我可以单击蓝色，然后单击红色、绿色、黄色，它按预期工作。如果我想变成绿色，它根本不会改变。但有时如果我想改成蓝色，它会起作用。为什么会这样？

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

标签： javascript

解决方案

阅读我的评论

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

推荐阅读