Może odwołaj się bezpośrednio do button-ów, to pozwoli uniknąć "problemu" (w cudzysłowie, bo event delegation sam w sobie nim nie jest, tylko trzeba z niego "świadomie" korzystać
) opisanego przez @ScriptyChris-a.
Propozycja zmiany kodu
const counterDiv = document.querySelector('.counter');
const buttons = document.querySelectorAll('.button-container button');
buttons.forEach(button => {
button.addEventListener('click', count);
})
function count({target}) {
let cssColor = 'white';
let counterValue = 0;
if (!target.classList.contains('reset')) {
counterValue = Number(counterDiv.textContent) + Number(target.textContent);
cssColor = (counterValue < 0) ? 'red':'green';
}
counterDiv.innerText = counterValue;
counterDiv.style.color = cssColor;
}
[ edit ]
Propozycja, wersja bez odwoływania się bezpośrednio do button-ów.
const counterDiv = document.querySelector('.counter');
const btns = document.querySelector('.button-container');
btns.addEventListener('click', count);
function count({target}) {
if (target.classList.contains('btn')) {
let cssColor = 'white';
let counterValue = 0;
if (!target.classList.contains('reset')) {
counterValue = Number(counterDiv.textContent) + Number(target.textContent);
cssColor = (counterValue < 0) ? 'red':'green';
}
counterDiv.innerText = counterValue;
counterDiv.style.color = cssColor;
}
}