я же написал, "как вариант, но очень "сомнительный" подход".
несомненно, предложенный тобой подход является верным
<html>
<body>
<div style="padding: 20px; background:yellow;"></div>
<script>
arrColors=['red','yellow','blue','black']
const classOne = document.querySelector('div');
classOne.addEventListener('click', (e) => {
let color=e.target.style.background
newIndex=(arrColors.findIndex(e=>e===color)+1)%arrColors.length
e.target.style.background = arrColors[newIndex]
})
</script>
</body>
</html>
но здесь есть один минус. Первоначальный цвет нужно задавать непосредственно в элементе. Если через класс, то первый раз e.target.style.background выдаст пусто и будет red вместо blue