How can I reset background color on keypress?-CodePudding

I'm trying to have divs that, when moused over, change their background color, and being able to reset those colors. I've managed the former, but the latter is giving me issues.

As written, the divs do, in fact, change color, but attempting to press a key does not result in anything. I've also tried to put the resetColor function in the same block of Script, but doing so makes it so I can't even hover over and change the colors of those divs. As such, I'm wondering what I should do to be able to reset the divs' color?

function randomColor(element) {
  var x = Math.floor(Math.random() * 256);
  var y = Math.floor(Math.random() * 256);
  var z = Math.floor(Math.random() * 256);
  var bgColor = "rgb("   x   ","   y   ","   z   ")";
  console.log(bgColor);
  element.backgroundColor = bgColor;
}

function resetColor(element) {
  element.backgroundColor = '#ffff99';
}

body {
  background-color: lightblue;
}

.colorCell {
  border: 1px solid black;
  width: 10px;
  padding: 5px;
  background-color: #ffff99;
  border-radius: 0px;
}

<div  onm ouseover="randomColor(this.style)" onkeydown="resetColor(this.style)">
  <!--Successfullly changed color-->
  <!--<a onm ouseover="colorCell.body.style.backgroundColor = '#f39352'">-->
</div>
<div  onm ouseover="randomColor(this.style)" onkeydown="resetColor(this.style)">
</div>
<div  onm ouseover="randomColor(this.style)" onkeydown="resetColor(this.style)">
</div>

CodePudding user response：

Check the fiddle: https://jsfiddle.net/ycn4zx9b/3/

HTML:

<div  onm ouseover="randomColor(this)"></div>
<div  onm ouseover="randomColor(this)"></div>
<div  onm ouseover="randomColor(this)"></div>

CSS is still the same as you provided.

JS:

function randomColor(element) {
 var x = Math.floor(Math.random() * 256);
 var y = Math.floor(Math.random() * 256);
 var z = Math.floor(Math.random() * 256);
 var bgColor = "rgb("   x   ","   y   ","   z   ")";
 element.style.backgroundColor = bgColor;
 element.classList.add(`reset-me`);
}

function resetColor(element) {
 element.style.backgroundColor = '#ffff99';
}

window.onload = () => {
 document.getElementsByTagName(`body`)[0].addEventListener(`keydown`, () => {
  var itemss = document.querySelectorAll(`.reset-me`);
  for (var i = 0; i < itemss.length; i  ) {
   resetColor(itemss[i]);
  }
 });
}

Keypress won't work on such elements on which you cannot enter something. Make the event global instead and it should work.

CodePudding user response：

an idea can be to :

add an event listener at document level
stored hovered cell
if one cell is over and keydown reset the celle style

let elementHovered = null;

function getRandomColor() {
  return Math.floor(Math.random() * 256);
}

function randomColor(element) {
  const bgColor = `rgb(${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
  console.log(bgColor);
  element.backgroundColor = bgColor;
}

function resetColor(element) {
  element.backgroundColor = '#ffff99';
}

[...document.querySelectorAll('.colorCell')].forEach(cell => {
  cell.addEventListener('mouseover', () => {
    elementHovered = event.target.style;
    randomColor(elementHovered);
  });
});

document.addEventListener('keydown', () => {
  if (elementHovered) {
    resetColor(elementHovered)
  }
});

body {
  background-color: lightblue;
}

.colorCell {
  border: 1px solid black;
  width: 10px;
  padding: 5px;
  background-color: #ffff99;
  border-radius: 0px;
}

<div ></div>
<div ></div>
<div ></div>