Pewnie są dziesiątki sposobów, żeby to zrobić, ja użułbym czegoś takiego.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
div {
height: 200px;
margin: 20px;
width: 200px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
<body>
<div id='container'>
</div>
<script>
const container = document.querySelector('#container')
makeButton = (container, btnClass, btnText) => {
const div = document.createElement('div')
const button = document.createElement('button')
const text = document.createTextNode(btnText)
button.append(text)
addEvent(button)
div.append(button)
div.classList.add(btnClass)
container.append(div)
}
changeColor = (e) => {
const parentDiv = e.target.parentNode
if (parentDiv.classList.contains('red')) {
parentDiv.classList.remove('red')
parentDiv.classList.add('blue')
} else {
parentDiv.classList.remove('blue')
parentDiv.classList.add('red')
}
}
addEvent = (button) => {
button.addEventListener('click', changeColor)
}
for (let i = 0; i < 20; i++) {
makeButton(container, 'red', 'zmien')
}
</script>
</body>
</html>