Javascript-форум - Не срабатывающий js код

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Не срабатывающий js код (https://javascript.ru/forum/misc/82016-ne-srabatyvayushhijj-js-kod.html)

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

На 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);};

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

Сворачивание меню в столбик иконок сбоку

Цитата:

Сообщение от рони (Сообщение 534203)

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,
код ниже бесполезен, потому что все 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>

Без всякого 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>