Не срабатывающий js код

[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>

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

[рони]

vladdvin,
у коллекции элементов document.querySelectorAll не бывает обработчиков событий, обработчики событий надо ставить на сам элемент.
проще в
в цикле for

for(let li of elemmenuitemli) {
li.addEventListener("mouseover", checkitem);
li.addEventListener("mouseleave", checkitem);};

[vladdvin]

на document.querySelectorAll мне уже указали. Как быть на https://ru.stackoverflow.com/questio...be%d0%ba%d1%83 (это новая версия вопроса)

[vladdvin]

for(let li of elemmenuitemli) {
li.addEventListener("mouseover", checkitem);
li.addEventListener("mouseleave", checkitem);};

см. https://ru.stackoverflow.com/questio...be%d0%ba%d1%83 - новая версия вопроса

[рони]

vladdvin,
нет элементов на странице с которыми работает скрипт -- скрипт ставить вниз страницы -- изучать DOMContentLoaded
после клика нет элементов с которыми работает скрипт -- убрать innerHTML -- изучать делегирование.

[vladdvin]

Каким образом в этом вопросе используется делегирование?

[рони]

vladdvin,
код ниже бесполезен, потому что все li стираются строки /* Удаление меню ul*/

sidemenu.innerHTML=`<li>

elemmenuitemli.forEach(li => {
  li.addEventListener("mouseover", checkitem);
  li.addEventListener("mouseleave", checkitem);
});

поэтому обработку событий надо ставить на то что есть всегда это sidemenu, либо не удалять li.


как использовать делегирование, вам было показано тут

[рони]

vladdvin,
внизу рабочий код, но это плохая практика ...

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/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;
}
    </style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    alert("Файл вызван");
    let sidemenu = document.querySelector('#sidemenu');
    sidemenu.addEventListener("mouseover", handler);
    sidemenu.addEventListener("mouseleave", handler);
    function handler(event) {
        if ((event.target && event.target.closest(".fa") && sidemenu.classList.contains("active")) || event.type === "mouseleave") checkitem()
    }
    function checkitem() {
        let sidemenu = document.querySelector('#sidemenu');
        if (sidemenu.classList.contains("active")) {
            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.remove("active");
        } else {
            sidemenu.innerHTML = `
                    <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.add('active');
        }
    }
});
</script>
</head>
<body>
<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>
</body>
</html>

[voraa]

Без всякого javascript все может работать.

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/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;
}
/*  Добавил это */
ul:not(:hover) .centerplace,
ul:not(:hover) .rightside
 {
	display: none;
}
    </style>
</head>
<body>
<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>
</body>
</html>