Почему не работает код на JS?

Question

[ivasenkoartem]

var stap;
var stapContent;

window.onload=function () {
  stapContent=document.getElementsByClassName('stapContent');
  stap=document.getElementsByClassName('stap');
  hideStapContent(1);
}

function hideStapContent (r) {
  for (var i=r; i<stapContent.length; i++) {
    stapContent[i].classList.remove('show');
    stapContent[i].classList.add('hide');
    stap[i].classList.remove('active');
  }
}

document.getElementById('staps').onclick=function (event) {
  var starget = event.starget;
  if (starget.className == 'stap'){
    for (var i=0; i<stap.length; i++) {
      if (starget == stap[i]) {
        showStapsContent(i);
        break; 
      }
    }
  }
}

function showStapsContent (j) {
  if(stapContent[j].classList.contains('hide')) {
    hideStapContent(0);
    stap[j].classList.add('active');
    stapContent[j].classList.remove('hide');
    stapContent[j].classList.add('show');
  }
}

<h3>Этапы работы</h3>
      <div class="steps">
      <div class="line"></div>
      <div id="staps">
       <div class="staps">

        <div class="col-md-3 col-sm-6 col-xs-6 stap active">
          <div class="step">
            <div class="icon"><i class="far fa-chart-bar"></i></div>
            <div class="name">Анализ <br>местности</div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-6 stap">
          <div class="step ">
            <div class="icon"><i class="far fa-list-alt"></i></div>
            <div class="name">Сбор <br>технических <br>характеристик</div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-6 stap">
          <div class="step ">
            <div class="icon"><i class="far fa-folder"></i></div>
            <div class="name">Подготовка <br>документов</div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-6 stap">
          <div class="step">
            <div class="icon"><i class="far fa-edit"></i></div>
            <div class="name">Формирование <br>технического <br>задания</div>
          </div>
        </div>

       </div>
       <div class="stapContent">11111</div>
       <div class="stapContent">22222</div>
       <div class="stapContent">33333</div>
       <div class="stapContent">44444</div>
        </div>
      </div>
   

    </div>
  </div>

main.js:64 Uncaught TypeError: Cannot read property 'className' of undefined
at HTMLDivElement.document.getElementById.onclick

Answer 1

[Stockholm Syndrome]

var starget = event.target;
вместо
var starget = event.starget;

Answer 2

[Moses Fender]

потому что document.getElementById('staps').onclick назначает слушателя на первый элемент, а остальные остаются мимо. нужно использовать querySelectorAll(), и слушателей назначать в цикле всем найденным.