<div class="kopesalen">
  <h1>Переключатель цветовой схемы</h1>
  <span class="asnulsabun" id="grey"></span>
  <span class="asnulsabun" id="white"></span>
  <span class="asnulsabun" id="blue"></span>
  <span class="asnulsabun" id="yellow"></span>
  <h2>Попробуйте нажать на один из цветов выше <span>изменить цвет фона этой страницы!</span></h2>  
  </div>

.kopesalen {
  margin: 100px auto 100px;
  width: 80%;
  text-align: center;
}

.asnulsabun {
  width: 100px;
  height: 100px;
  border: solid black 2px;
  display: inline-block;
  border-radius: 50%;
}

#grey{
  background: grey;
}

#white{
  background: white;
}
#blue{
  background: blue;
}
#yellow{
  background: yellow;
}

const asnulsabuns = document.querySelectorAll('.asnulsabun');
const body = document.querySelector('body');

console.log(asnulsabuns);

asnulsabuns.forEach(function(asnulsabun){
  asnulsabun.addEventListener('click', function(e){
  console.log(e.target);
  if (e.target.id === 'grey'){
  body.style.backgroundColor = e.target.id;
  }
  if (e.target.id === 'white'){
  body.style.backgroundColor = e.target.id;
  }
  if (e.target.id === 'blue'){
  body.style.backgroundColor = e.target.id;
  }
  if (e.target.id === 'yellow'){
  body.style.backgroundColor = e.target.id;
  }
  })
})