[vladdvin]

На https://ru.stackoverflow.com/questio...ba%d0%be%d0%b4 не срабатывает. Даже alert("Файл вызван"); не срабатывает.
Подскажите в чем причина такого парадоксального явления.
Привожу код

let elemmenuitemli = document.querySelectorAll('.fa');
let sidemenu = document.querySelector('#sidemenu');

elemmenuitemli.addEventListener("mouseover", checkitem);
elemmenuitemli.addEventListener("mouseleave", checkitem);

alert("Файл вызван");

function checkitem() {
	if sidemenu.classList.contains("active")
	{
		/* Удаление меню ul*/
		sidemenu.innerHTML=`
		/* Сворачивание меню ul */
		  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  </li>
  `;
  sidemenu.classList.remove("active");

	}
	else {
		/* Удаление меню ul*/
		sidemenu.innerHTML=`<li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Техника для кухни</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Бытовая техника для дома</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Ноутбуки и компьютеры</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Комплектующие</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  </li>`;
		sidemenu.classList.add('active');
		/* Разворачивание меню ul */
	}
}

testsite.css

* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

ul {
  background: #afafaf;
  display: inline-block;
  width: 420px;
  border-right: 1px solid #000;
}

ul li {
  padding: 6px 0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

ul li:hover {
  background: lightgreen;
}

ul li a {
  color: #000;
}

ul li:hover a,
ul li:hover .fa {
  color: #fff;
}

ul li .fa {
  display: inline-block;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.leftside {
  margin-left: 16px;
  display: inline-block;
  width: 30px;
  height: 30px;  
  display: inline-flex;
}

.rightside {
  margin-right: 16px;
  visibility: hidden;
  width: 30px;
  height: 30px;  
  display: inline-flex;
}

.centerplace {
  width: 328px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.nestedblock{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin:0 auto;
}

testsite.html

<link rel="stylesheet" href="testsite.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <link rel="stylesheet" href="testsite.js"> -->
<ul id="sidemenu">
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Техника для кухни</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Бытовая техника для дома</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Ноутбуки и компьютеры</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  <li>
    <div class="leftside">
	<i class="fa fa-home"></i>
	</div>
    <div class="centerplace">
	<a href="" class="nestedblock">Комплектующие</a>
	</div>
	<div class="rightside">
	<i class="fa fa-home"></i>
	</div>    
  </li>
  </li>
</ul>

<script src="testsite.js"></script>

Мне как новичку будет полезно знать в чем ошибка.