loop gradient directions by clicking on a target

Question

I need to loop all of the eight gradient directions by clicking on a target, like this:

Answer 1

Don't over complicate it, make it simple:

var c=0;

document.querySelector('.targ').addEventListener('click',function(e) {
  e.target.style.setProperty('--d',(c+=90)+"deg");
})

.targ {
  width: 54px;
  height: 54px;
  cursor: pointer;
  background: linear-gradient(var(--d,0deg),red,yellow)
}