Почему элементы управления на моем слайдере не реагируют на мой курсор и почему моя консоль ничего не регистрирует?

Question

Я новичок в кодировании и программировании, и я следил на Youtube на экранной записи программиста, делающего адаптивный слайдер миниатюр, используя HTML, CSS и Javascript. Я попал в точку, когда я пытаюсь заставить "0" отображаться в моей консоли, когда я щелкаю элементы управления для ползунка, но я не могу заставить элементы управления реагировать на мой курсор.

Может кто-нибудь сказать мне, почему это происходит? Мой код ниже.

const controls=document.querySelector(".artcontrols");
	const container=document.querySelector(".thumbnailcontainer");
	const allBox=container.children;
	const containerWidth=container.offsetWidth;
	const margin=30;
	var item=0;
	var totalItems=0;
	
	// item setup per slide
	
	responsive=[
	{breakPoint:{width:0,item:1}}, //if width greater than 0 (1 will item show)
	{breakPoint:{width:600,item:2}}, //if width greater than 600 (2 will item show)
	{breakPoint:{width:1000,item:6}} //if width greater than 1000 (4 will item show)
	]
	
	function load(){
		for(let i=0; i<responsive.length;i++){
			if(window.innerWidth>responsive[i].breakPoint.width){
				items=responsive[i].breakPoint.item
			}
		}
		start();
	}
	
	function start(){
		var totalItemsWidth=0
		for(let i=0;i<allBox.length;i++){
			//width and margin setup of items
			allBox[i].style.width=(containerWidth/items)-margin + "px";
			allBox[i].style.margin=(margin/2)+ "px";
			totalItemsWidth+=containerWidth/items;
			totalItems++;
		}
		//tumbnail-container width set up
		container.style.width=totalItemsWidth + "px";
		
		//slides controls number set up
		 const allSlides=Math.ceil(totalItems/items);
		 const ul=document.createElement("ul");
			for(let i=1;i<=allSlides;i++){
			  const li=document.createElement("li");
					li.id=i;
					li.innerHTML=i;
					li.setAttribute("onclick","controlSlides(this)");
					ul.appendChild(li);
					if(i==1){
					 li.className="active";
					}
			}
			controls.appendChild(ul);
	}
	
	//when clicked numbers slide to next slide
	function controlSlides(ele){
		//select controls children 'ul' element
		const ul=controls.children;
		
		//select ul children 'li' elements;
	  const li=ul[0].children;
		
		//find who is now active
		var active;
		
		for(let i=0;i<li.length;i++){
		 if(li[i].className=="active"){
				//find who is now active
				active=i;
				console.log(active)
		 }
		}
	}
	
	window.onload=load();

* {
	box-sizing: border-box;
}

.thumbnailslider {
	width: 100%;
	float: left;
	overflow: hidden;
}

.thumbanilslider .thumbnailcontainer {
	width: 100%;
	float: left;
	transition: margin 1s ease;
}

.thumbnailslider .artitem {
	height: 175px;
	background-color: grey;
	line-height: 175px;
	text-align: center;
	font-size: 50px;
	color: #ffffff;
	float: left;
}

.thumbnailslider .artcontrols {
	width: 100%;
	float: left;
	padding: 15px;
}

.thumbnailslider .artcontrols ul {
	display: block;
	text-align: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.thumbnailslider .artcontrols ul li {
	height: 35px;
	width: 35px;
	border: 1px solid #c3c3c3;
	margin: 4px;
	display: inline-block;
	line-height: 33px;
	cursor: pointer;
}

.thumbnailslider .artcontrols ul li.active{
	background-color: green;
	color: #ffffff;
}

<div class="thumbnailslider">
			<div class="thumbnailcontainer">
				<div class="artitem">
				1
				</div>
				<div class="artitem">
				2
				</div>
				<div class="artitem">
				3
				</div>
				<div class="artitem">
				4
				</div>
				<div class="artitem">
				5
				</div>
				<div class="artitem">
				6
				</div>
				<div class="artitem">
				7
				</div>
				<div class="artitem">
				8
				</div>
				<div class="artitem">
				9
				</div>
				<div class="artitem">
				10
				</div>
			</div>
			
			<!-- Control Slides -->
			<div class="artcontrols">
				
			</div>
		</div>
		<script src="script.js"></script>