Как узнать порядок элемента, на который нажал пользователь?

Question

[JP_Cool]

Есть вот такая html-структура:

<div class="seasons">
    <a 
      class="season-spring" 
      href="music/01_-_Vivaldi_Spring_mvt_1_Allegro_-_John_Harrison_violin.ogg"
    >Весна</a>
    <a 
      class="season-summer" 
      href="music/04_-_Vivaldi_Summer_mvt_1_Allegro_non_molto_-_John_Harrison_violin.ogg"
    >Літо</a>
    <a 
      class="season-autumn" 
      href="music/07_-_Vivaldi_Autumn_mvt_1_Allegro_-_John_Harrison_violin.ogg"
    >Осінь</a>
    <a
      class="season-winter"
      href="music/10_-_Vivaldi_Winter_mvt_1_Allegro_non_molto_-_John_Harrison_violin.ogg"
    >Зима</a>
  </div>

Как узнать порядок ссылки на которую нажал пользователь, чистый javascript, нельзя редактировать никакие файлы кроме как с js-кодом.

Answer 1

[gleendo]

Demo

const elements = document.querySelectorAll(".seasons a");

elements.forEach(element => element.addEventListener("click", event => {
  event.preventDefault();

  console.log(Array.prototype.indexOf.call(elements, event.target));
}, false));