为什么GetElementsByClassName不显示onclick事件警报？

Question

我正在尝试提醒此div获得的点击次数。但是出了点问题。使用getElementById时，我可以发出警报。我只需要形状来调用点击计数器。因此，我使用getElementsByClassName来调用函数clickCounter。但是我正在做的事情没有用，即没有发出警报。

我哪里出错了？也仅仅纯JavaScript（Vanilla JS）。

var count = 0;

function clickCounter(){
	count++;
	alert(count);

}

function initMyEvents(){
	document.getElementsByClassName("clicked").onclick = clickCounter;
}

window.onload = initMyEvents;

:root {
  --main-hand-color: #fb7a7a;
  --main-shirt-color: #3d4886;
}

.box{
	width: 500px;
	height: 500px;
	margin: auto;
	position: relative;
	display: block;
	margin-top: 5%;
}

.shirt{
	position: absolute;
	height: 350px;
	width: 100px;
	background-color: var(--main-shirt-color);
	top: 0%;
	left: 0;
}

.wrist{
	position: absolute;
	height: 300px;
	width: 435px;
	background-color: var(--main-hand-color);
	border-radius: 10%;
	top: 5%;
	left: 0;
	z-index: -1;
}

.thumb{
	position: absolute;
	height: 250px;
	width: 100px;
	background-color: var(--main-hand-color);
	border-radius: 20%;
	top: 45%;
	left: 28%;
}

<div class="box">
		<div class="shirt clicked"></div>
		<div class="wrist clicked"></div>
		<div class="thumb clicked"></div>
	</div>