Итак, у меня есть таблица, прикрепленная к прослушивателю событий, где каждый раз, когда я наводю указатель мыши на <td>, он генерирует цвет rgb в зависимости от положения моей мыши. Я хочу создать генератор цветовой палитры. У меня проблемы с:
1) Как я могу добавить событие щелчка, которое будет принимать случайно сгенерированный цвет, которое затем отключит <td> от создания дополнительных цветов, когда я перемещаю мышь, при отображении этот цвет rgb на <td>? (очень надеюсь, что я правильно сформулировал ...)
2) Как я могу сохранить этот выбранный сгенерированный цвет, чтобы его можно было отобразить в моем class="color-ref".
Я пробовал добавить еще один прослушиватель событий, но поскольку я новичок в кодировании, я не уверен, как заставить его работать. Вот мой код
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Palette Generator</title>
</head>
<body>
<header id="main-header">
<h1 id="header-title">Palette Generator</h1>
</header>
<table class="container">
<tr>
<td class="grid-sqr"><div class="color-ref"></div></td>
<td class="grid-sqr"><div class="color-ref"></div></td>
<td class="grid-sqr"><div class="color-ref"></div></td>
<td class="grid-sqr"><div class="color-ref"></div></td>
</tr>
<tr>
<td class="grid-sqr"><div class="color-ref"></div></td>
<td class="grid-sqr"><div class="color-ref"></div></td>
<td class="grid-sqr"><div class="color-ref"></div></td>
<td class="grid-sqr"><div class="color-ref"></div></td>
</tr>
<tr>
<td class="grid-sqr"><div class="color-ref"></div></td>
<td class="grid-sqr"><div class="color-ref" ></div></td>
<td class="grid-sqr"><div class="color-ref"></div></td>
<td class="grid-sqr"><div class="color-ref"></div></td>
</tr>
</table>
<br>
<p></p>
</body>
<script src="main.js"></script>
</html>
Javascript
//=================== GLOBAL VARIABLES ===================
const gridSquare = document.getElementsByClassName('grid-sqr');
const p = document.querySelector('p');
//=================== FUNCTIONS ===================
const getRandomInt = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
};
const colorGenerate = (e) => {
let random = getRandomInt(0,255);
p.innerHTML = 'R: ' +e.offsetX+ '<br> G: '+e.offsetY+ '<br> B: ' +random;
Array.from(gridSquare).forEach(function(item){
if (e.target == item){
item.style.backgroundColor = "rgb("+e.offsetX+", "+e.offsetY+", "+random+")";
}
});
};
//=================== EVENT LISTENERS ===================
for (let i = 0; i < gridSquare.length; i++){
gridSquare[i].addEventListener('mousemove', colorGenerate);
// gridSquare[i].addEventListener('click', colorGenerate);
};
Вот мой проект, размещенный на github. https://ryantavcar.github.io/PaletteGenerator/
и мой репозиторий на github, если нужно. https://github.com/ryanTavcar/PaletteGenerator
Заранее большое спасибо!