const container = document.querySelector('.box');
container.addEventListener("click", ({ target: t }) => {
if(t.classList.contains("btn")) {
const card = t.closest(".item");
card && card.classList.add("active");
}
})
А так касательно кода из вопроса, то тут всё достаточно просто. Чтобы решить задачу, вам нужно добавлять обработчик клика кнопке которая является дочерним элементом карточки, плюс можно заменить цикл for на forEach, что сделает код более читабельным.
document.querySelectorAll('.item').forEach(v => {
v.querySelector(".btn").addEventListener('click', () => {
v.classList.add('active');
});
});
Однако в целом такой подход не очень. То есть я хочу сказать что добавление обработчиков в цикле, имеет свои подводные камни, про которые можно найти достаточно информации.
