Как я могу изменить цвет одного div с каждым событием наведения мыши?

Question

У меня есть сетка дивов. Я хочу, чтобы каждый div постепенно менял цвет с серого на черный при каждой наведенной мышке - в частности, я хочу, чтобы бокс стал черным к 10-му событию наведения мыши. Я на полпути. В настоящее время у меня есть функция, реализующая этот градиент цвета, но после того, как один прямоугольник становится черным, все остальные блоки, на которые я нахожу курсор мыши, тоже черные. Как сделать так, чтобы каждая коробка начиналась с одного и того же оттенка серого? Бьюсь об заклад, я могу добиться этого с помощью очень длинной серии if заявлений, но я хочу знать, есть ли более краткое решение.

const bigContainer = document.querySelector('.bigContainer')

window.onload = function initializeGrid() {
    for(let i = 0; i < 16; i++) {
        bigContainer.innerHTML+='<div class="row">';

        for(let j = 0; j < 16; j++) {
            bigContainer.innerHTML+='<div class="smallBox">';
        }
    }
}

let rbgPercentValue = 90;

bigContainer.addEventListener('mouseover', event => {
    let target = event.target
    let rgbColor = `rgb(${rbgPercentValue}%,${rbgPercentValue}%,${rbgPercentValue}%)`

    if (target !== bigContainer) {
      target.style['background'] = rgbColor;
      rbgPercentValue -= 10;
    }

})

.smallBox {
    border: 1px solid black;
    width: 40px;
    height: 40px;
    display: inline-block;
}
.row {
    margin-bottom: -5px; 
}
.bigContainer {
    text-align: center;
}

<div class="bigContainer"></div>

Answer 1

Это должно сделать это:

const bigContainer = document.querySelector('.bigContainer')

window.onload = function initializeGrid() {
    for(let i = 0; i < 16; i++) {
        bigContainer.innerHTML+='<div class="row">';

        for(let j = 0; j < 16; j++) {
            bigContainer.innerHTML+='<div class="smallBox" data-rgb-percent-value="90">';
        }
    }
}

bigContainer.addEventListener('mouseover', event => {
    const target = event.target
    const rgbPercentValue = target.dataset.rgbPercentValue;
    const rgbColor = `rgb(${rgbPercentValue}%,${rgbPercentValue}%,${rgbPercentValue}%)`

    if (target !== bigContainer) {
      target.dataset.rgbPercentValue = parseInt(target.dataset.rgbPercentValue) - 10;
      target.style['background'] = rgbColor;
    }
})

Смотрите демонстрацию здесь: https://repl.it/repls/LivelySugaryStatistics

Как и предполагали другие, при этом процент цвета сохраняется с атрибут данных для каждого отдельного блока, а не в одном глобальном значении.

Answer 2

Демонстрация с использованием заголовка (процент также виден).

const bigContainer = document.querySelector('.bigContainer')

window.onload = function initializeGrid() {
    for(let i = 0; i < 16; i++) {
        bigContainer.innerHTML+='<div class="row">';

        for(let j = 0; j < 16; j++) {
            bigContainer.innerHTML+='<div class="smallBox">';
        }
    }
}

bigContainer.addEventListener('mouseover', event => {
let target = event.target
let rbgPercentValue = parseInt(target.dataset.percent);
if (isNaN(rbgPercentValue)) rbgPercentValue = 100;
if (rbgPercentValue >= 10) {
    rbgPercentValue -= 10;
    target.dataset.percent = rbgPercentValue;
}
    let rgbColor = `rgb(${rbgPercentValue}%,${rbgPercentValue}%,${rbgPercentValue}%)`

    if (target !== bigContainer) {
        target.style['background'] = rgbColor;
    }

})

.smallBox {
    border: 1px solid black;
    width: 40px;
    height: 40px;
    display: inline-block;
}
.row {
    margin-bottom: -5px;
}
.bigContainer {
    text-align: center;
}

<div class="bigContainer"></div>

Answer 3

немного грязно, но похоже, что это должно работать для вас.

const bigContainer = document.querySelector('.bigContainer')
var rbgPercentValue = 100;
var rbgMultiplier=.9;
var rbgbcolor=`rgb(${100}%,${100}%,${100}%)`;

var pcts =new Array(16);
for(let i=0;i<16;i++){
pcts[i] = new Array(16);
}

for(let i = 0;i<16;i++){
   for(let j = 0;j<16;j++){
      pcts[i][j]=100;
}
}


window.onload = function initializeGrid() {
    for(let i = 0; i < 16; i++) {
        bigContainer.innerHTML+='<div class="row">';

        for(let j = 0; j < 16; j++) {
            bigContainer.innerHTML+='<div class="smallBox"  id=R'+i+'C'+j +'>';
        }
    }
}



bigContainer.addEventListener('mouseover', event => {
    let target = event.target
    
    
    var id= event.target.id;
    var index = id.indexOf("C");
    var row =id.substring(1,index);
    var col = id.substring(index+1);
    
    
    
    var div = document.getElementById(id);
    if (row != ''){
    
     pcts[row][col] = pcts[row][col]*rbgMultiplier;  
     rbgcolor=`rgb(${pcts[row][col]}%,${pcts[row][col]}%,${pcts[row][col]}%)`;

    
      div.style['background'] = rbgcolor;
    }
  
})

.smallBox {
    border: 1px solid black;
    width: 40px;
    height: 40px;
    display: inline-block;
}
.row {
    margin-bottom: -5px; 
}
.bigContainer {
    text-align: center;
}

<body>
    <div class="bigContainer"></div>
</body>