yaparoff,
на основе варианта от
Malleys
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.cell {
width: 80px;
height: 60px;
border: 1px solid #000;
cursor: pointer;
background-color: var(--bg-color, '')
}
.row {
display: flex;
margin: 20px auto;
}
</style>
<script>
const classNames = ['', 'yellow', 'red'];
document.addEventListener("click", event => {
const cell = event.target.closest(".row > .cell");
if(cell) {
const root = cell.parentNode;
if(root._lastCell) root._lastCell.style.setProperty('--bg-color', '');
if(root._lastCell != cell) root._current = 0;
root._current = (root._current + 1) % classNames.length;
root._lastCell = cell;
root._lastCell.style.setProperty('--bg-color', classNames[root._current])
}
});
</script>
</head>
<body>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</body>
</html>