robotehnika18,
https://learn.javascript.ru/event-delegation
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.block {
display: flex;
}
.table {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 30px;
padding: 1px;
margin: 10px;
width: 160px;
height: 257px;
background-color: gray;
}
.table>input {
width: 30px;
height: 30px;
background-color: silver;
}
.table>input.active {
background-color: forestgreen;
}
.show {
grid-template-columns: repeat(5, 1fr);
padding: 1px;
margin: 10px;
width: 40px;
height: 257px;
}
[type="reset"] {
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="block">
<div class="table">
<input type="button">
<input type="button">
<input type="button">
<input type="button">
<input type="button">
<input type="button">
<input type="button">
<input type="button">
<input type="button">
<input type="button">
</div>
<div class="show">
<span>0</span><span>0</span><span>0</span><span>0</span><span>0</span>
<span>0</span><span>0</span><span>0</span><span>0</span><span>0</span>
</div>
<button type="reset">reset</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let inputs = Array.from(document.querySelectorAll('.table>input'));
let spans = Array.from(document.querySelectorAll('.show>span'));
document.querySelector('.block').addEventListener('click', function(event) {
let target = event.target.closest('.table>input');
if (target) {
let index = inputs.indexOf(target);
let txt = +inputs[index].classList.toggle('active');
let span = spans[index];
if (span) span.textContent = txt;
}
let reset = event.target.closest('.block>[type="reset"]');
if (reset) {
inputs.forEach((input, i) => {
input.classList.remove('active');
let span = spans[i];
if (span) span.textContent = 0;
})
}
})
})
</script>
</body>
</html>