Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.03.2021, 16:13
Новичок на форуме
Отправить личное сообщение для vladdvin Посмотреть профиль Найти все сообщения от vladdvin
 
Регистрация: 09.04.2020
Сообщений: 9

Не срабатывающий 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>

Мне как новичку будет полезно знать в чем ошибка.
Ответить с цитированием
  #2 (permalink)  
Старый 01.03.2021, 16:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,156

vladdvin,
у коллекции элементов document.querySelectorAll не бывает обработчиков событий, обработчики событий надо ставить на сам элемент.
проще в
в цикле for
for(let li of elemmenuitemli) {
li.addEventListener("mouseover", checkitem);
li.addEventListener("mouseleave", checkitem);};
Ответить с цитированием
  #3 (permalink)  
Старый 01.03.2021, 19:01
Новичок на форуме
Отправить личное сообщение для vladdvin Посмотреть профиль Найти все сообщения от vladdvin
 
Регистрация: 09.04.2020
Сообщений: 9

на document.querySelectorAll мне уже указали. Как быть на https://ru.stackoverflow.com/questio...be%d0%ba%d1%83 (это новая версия вопроса)
Ответить с цитированием
  #4 (permalink)  
Старый 01.03.2021, 19:03
Новичок на форуме
Отправить личное сообщение для vladdvin Посмотреть профиль Найти все сообщения от vladdvin
 
Регистрация: 09.04.2020
Сообщений: 9

Сворачивание меню в столбик иконок сбоку
Сообщение от рони Посмотреть сообщение
vladdvin,
у коллекции элементов document.querySelectorAll не бывает обработчиков событий, обработчики событий надо ставить на сам элемент.
проще в
в цикле for
for(let li of elemmenuitemli) {
li.addEventListener("mouseover", checkitem);
li.addEventListener("mouseleave", checkitem);};
см. https://ru.stackoverflow.com/questio...be%d0%ba%d1%83 - новая версия вопроса
Ответить с цитированием
  #5 (permalink)  
Старый 01.03.2021, 19:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,156

vladdvin,
нет элементов на странице с которыми работает скрипт -- скрипт ставить вниз страницы -- изучать DOMContentLoaded
после клика нет элементов с которыми работает скрипт -- убрать innerHTML -- изучать делегирование.
Ответить с цитированием
  #6 (permalink)  
Старый 02.03.2021, 09:18
Новичок на форуме
Отправить личное сообщение для vladdvin Посмотреть профиль Найти все сообщения от vladdvin
 
Регистрация: 09.04.2020
Сообщений: 9

Каким образом в этом вопросе используется делегирование?
Ответить с цитированием
  #7 (permalink)  
Старый 02.03.2021, 09:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,156

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

sidemenu.innerHTML=`<li>

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


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


как использовать делегирование, вам было показано тут
Ответить с цитированием
  #8 (permalink)  
Старый 02.03.2021, 10:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,156

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>
Ответить с цитированием
  #9 (permalink)  
Старый 02.03.2021, 14:16
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,104

Без всякого 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Расшифровать js код. Batyabest Events/DOM/Window 9 08.12.2014 10:49
Ошибка при вставке php кода в js код zevilz Общие вопросы Javascript 6 10.10.2012 18:21
Оцените \ покритикуйте код, пожалуйста (верстка + js) Heian Ваши сайты и скрипты 6 17.09.2012 19:23
Выполнить строку как код JS OlegC Общие вопросы Javascript 2 13.09.2012 17:52
Как получит ссылку на элемент внутри которого запустили JS код? aRpi Events/DOM/Window 20 02.10.2011 12:36