Как выбрать элемент после изменения имени его класса с помощью DOM? ⇐ Javascript

[Anonymous]

Цель — создать кнопку запуска, которая активирует сетку 3x3 и делает ее доступной для игры.
Ячейки начинаются с «неактивного» класса. Нажатие кнопки «Пуск» меняет их с «неактивных» на «активные».
Затем используется querySelectorAll('.active'), чтобы, когда пользователь нажимает на активированные ячейки, функция alert() должна срабатывать.
Проблема в том, что функция alert() этого не делает. Пожалуйста, помогите.

Код: Выделить всё

const startBtn = document.querySelector('.start');
const buttons = document.querySelectorAll('.active');

// clicking start button changes class name of cells from inactive to active
startBtn.addEventListener('click', () => {
const cells = document.querySelectorAll('button');
cells.forEach((button) => {
button.classList.replace('inactive', 'active');
})
})

// alert function will execute upon clicking on cells with active class
buttons.forEach((button) => {
button.addEventListener('click', () => {

alert();

})
})

Код: Выделить всё

.inactive,
.active {
height: 150px;
width: 150px;
}

div[data-row] {
display: flex;
}

Код: Выделить всё

start

Подробнее здесь: https://stackoverflow.com/questions/798 ... e-with-dom