Quiero que cada boton cambie de color de forma indivual. Existe alguna forma de hacerlo sin que tener que hacer un codigo para cada id? tambien me sirve saber si se puede lograr teniendo la misma clase o id en cada boton
<button id="btn-1" style="background-color: salmon;">Button</button>
<button id="btn-2" style="background-color: salmon;">Button</button>
<button id="btn-3" style="background-color: salmon;">Button</button>
<button id="btn-4" style="background-color: salmon;">Button</button>
const btn = document.getElementById('btn-1');
btn.addEventListener('click', function onClick(event) {
const backgroundColor = btn.style.backgroundColor;
if (backgroundColor === 'salmon') {
btn.style.backgroundColor = 'green';
} else if (backgroundColor === 'green') {
btn.style.backgroundColor = 'purple';
} else {
btn.style.backgroundColor = 'purple';
}
});
id
viene de identidad e identifica cada elemento, misma clase si por que los agrupa en la misma clase de boton y cada uno mantiene su identidad.