Why doesn't code in JS?

var stap;
var stapContent;

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

hideStapContent function (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; 
}
}
}
}

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


the <h3>Stages</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="fa far-chart-bar"></i></div>
 <div class="name">Analysis <br>location</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">Collecting <br>technical <br>characteristics</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">Training <br>documents</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">the Formation of <br>technical <br>jobs</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
March 20th 20 at 11:44
2 answers
March 20th 20 at 11:46
Solution
var starget = event.target;
instead
var starget = event.starget;
March 20th 20 at 11:48
because document.getElementById('staps').assigns an onclick listener to the first element, and the rest remain by. you need to use querySelectorAll(), and listeners assign to cycle it.

Find more questions by tags JavaScript