How do I change the box colours once I hover over the boxes?-CodePudding

I want to be able to leave a pixelated trail once I hover over all the boxes. I've tried adding a :hover class in CSS my it's just changing 1 box color at once. I research a bit and found that the mouseenter and mouseleave method from addEventListeners works. However, I tried writing my over and over with my code without success. I've tried using the click method of addEventListener and it works but that's not what I want. Can anyone help me to have a look at what I should do?

let container = document.querySelector('.container');
let rows = document.getElementsByClassName('gridRow');
let columns = document.getElementsByClassName('gridColumn');

function createGrid(number) {
    makeRow(number);
    makeColumn(number);
}

function makeRow(numberOfRow) {
    for (let i = 0; i < numberOfRow; i  ) {
        let row = document.createElement('div');
        container.appendChild(row);
        row.classList.add('gridRow');
    }
}

function makeColumn(numberOfColumn) {
    for (let i = 0; i < rows.length; i  ) {
        for (let j = 0; j < numberOfColumn; j  ) {
            let column = document.createElement('div');
            rows[j].appendChild(column);
            column.classList.add('gridColumn');
        }
    }
}

createGrid(16);

body {
    height: 100%;
    background-color: beige;
}

.container {
    display: flex;
    flex: 1;
}

.gridColumn {
    display: inline-block;
    border: 1px solid rgb(16, 16, 44);
    margin: -2px 0px;
    width: 100%;
    height: 10%;
    gap: 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation and Events</title>
    <script src="javascript.js" defer></script>
    <link rel="stylesheet" href="styles.css">
</head>

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

</html>

CodePudding user response：

let container = document.querySelector('.container');
let rows = document.getElementsByClassName('gridRow');
let columns = document.getElementsByClassName('gridColumn');

function createGrid(number) {
  makeRow(number);
  makeColumn(number);
}

function makeRow(numberOfRow) {
  for (let i = 0; i < numberOfRow; i  ) {
    let row = document.createElement('div');
    container.appendChild(row);
    row.classList.add('gridRow');
  }
}

function makeColumn(numberOfColumn) {
  for (let i = 0; i < rows.length; i  ) {
    for (let j = 0; j < numberOfColumn; j  ) {
      let column = document.createElement('div');

      column.addEventListener('mouseenter', () => {
        column.style.backgroundColor = 'blue'
      });

      rows[j].appendChild(column);
      column.classList.add('gridColumn');
    }
  }
}

createGrid(16);

body {
  height: 100%;
  background-color: beige;
}

.container {
  display: flex;
  flex: 1;
}

.gridColumn {
  display: inline-block;
  border: 1px solid rgb(16, 16, 44);
  margin: -2px 0px;
  width: 100%;
  height: 10%;
  gap: 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Manipulation and Events</title>
  <script src="javascript.js" defer></script>
  <link rel="stylesheet" href="styles.css">
</head>

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

</html>

CodePudding user response：

You can add to you column created element event listener that when you will mouseover it add classList colored

in css colored class background is red

let container = document.querySelector('.container');
let rows = document.getElementsByClassName('gridRow');
let columns = document.getElementsByClassName('gridColumn');

function createGrid(number) {
  makeRow(number);
  makeColumn(number);
}

function makeRow(numberOfRow) {
  for (let i = 0; i < numberOfRow; i  ) {
    let row = document.createElement('div');
    container.appendChild(row);
    row.classList.add('gridRow');
  }
}

function makeColumn(numberOfColumn) {
  for (let i = 0; i < rows.length; i  ) {
    for (let j = 0; j < numberOfColumn; j  ) {
      let column = document.createElement('div');
      column.addEventListener("mouseover", () => {
        column.classList.add("colored")
      })
      // if you want to keep changed color remove this event
      column.addEventListener("mouseleave", () => {
        column.classList.remove("colored")
      })
      rows[j].appendChild(column);
      column.classList.add('gridColumn');
    }
  }
}

createGrid(16)

body {
  /* display: flex;
        flex: 1; */
  height: 100%;
  background-color: beige;
}

.container {
  display: flex;
  flex: 1;
}

.gridColumn {
  display: inline-block;
  border: 1px solid rgb(16, 16, 44);
  margin: -2px 0px;
  width: 100%;
  height: 10%;
  gap: 0px;
}

.colored{
  background: red;
}

<div ></div>

CodePudding user response：

You can set the backgroundColor of the cell to desired color using mouseenter event and set it back to default using mouseleave event.

let container = document.querySelector('.container');
let rows = document.getElementsByClassName('gridRow');
let columns = document.getElementsByClassName('gridColumn');

function createGrid(number) {
    makeRow(number);
    makeColumn(number);
}

function makeRow(numberOfRow) {
    for (let i = 0; i < numberOfRow; i  ) {
        let row = document.createElement('div');
        container.appendChild(row);
        row.classList.add('gridRow');
    }
}

function makeColumn(numberOfColumn) {
    for (let i = 0; i < rows.length; i  ) {
        for (let j = 0; j < numberOfColumn; j  ) {
            let column = document.createElement('div');
            rows[j].appendChild(column);
            column.classList.add('gridColumn');
        }
    }
}

createGrid(16);

document.querySelectorAll(".gridColumn").forEach(cell=>{
  cell.addEventListener("mouseenter", (e)=>{
    e.target.style.backgroundColor = generateRandomRGB();
  })
  cell.addEventListener("mouseleave", (e)=>{
    e.target.style.backgroundColor = "transparent";
  })
})

function generateRandomRGB(){
  let r = Math.floor(Math.random() * 255);
  let g = Math.floor(Math.random() * 255);
  let b = Math.floor(Math.random() * 255);
  
  return `rgb(${r}, ${g}, ${b})`;
}

body {
    height: 100%;
    background-color: beige;
}

.container {
    display: flex;
    flex: 1;
}

.gridColumn {
    display: inline-block;
    border: 1px solid rgb(16, 16, 44);
    margin: -2px 0px;
    width: 100%;
    height: 10%;
    gap: 0px;
    transition: 0.1s;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation and Events</title>
    <script src="javascript.js" defer></script>
    <link rel="stylesheet" href="styles.css">
</head>

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

</html>