Vardges,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.element {
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var elem=document.querySelectorAll('.element');
var color = {};
for (var i=0;i<elem.length;i++){
elem[i].addEventListener('click',F);
}
function F(){
var tiv = parseInt(Math.random()*9);
this.textContent = tiv;
if (!color[tiv]) {
var r=parseInt(Math.random()*255);
var g=parseInt(Math.random()*255);
var b=parseInt(Math.random()*255);
color[tiv] = "rgb("+r+", "+g+", "+b+")"
}
this.style.backgroundColor = color[tiv]
}
});
</script>
</head>
<body>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</body>
</html>