Форум

АртемБМ · #1 (**permalink**) 15.06.2020, 22:37

Товарищи! Задумал сделать менюшку (при клике на разные кнопки открывается разный контент). Вот такой незамысловатый код:

<div class="projects-categories">
	<button class="btn-projects-categories" id="all">All</button>
    <button class="btn-projects-categories" id="web-design">Web Design</button>
	<button class="btn-projects-categories" id="mobile-app">Mobile App</button>
	<button class="btn-projects-categories" id="illustration">Illustration</button>
	<button class="btn-projects-categories" id="photograph">Photography</button>
</div>

А вот начал писать скрипт:

let btnProjectsCategories = document.getElementsByTagName('btn-projects-categories');

btnProjectsCategories.addEventListener('click', function(){

	btnProjectsCategories.classList.add('active');

});

но почему у меня не работает даже событие клика? Говорит "Uncaught TypeError: btnProjectsCategories.addEventListener is not a function" а если навешивать "onclick" то работает только если напишу "document.querySelector('.btn-projects-categories')" с "All" не работает 0_о

Vlasenko Fedor · #2 (**permalink**) 15.06.2020, 22:52

<div class="projects-categories">
	<button class="btn-projects-categories" id="all">All</button>
    <button class="btn-projects-categories" id="web-design">Web Design</button>
	<button class="btn-projects-categories" id="mobile-app">Mobile App</button>
	<button class="btn-projects-categories" id="illustration">Illustration</button>
	<button class="btn-projects-categories" id="photograph">Photography</button>
</div>
<script>
document.querySelector('.projects-categories').addEventListener('click', ({target})=>{
alert(target.id);
})
</script>

Пример использования делегирования событий

рони · #3 (**permalink**) 15.06.2020, 23:24

АртемБМ,
если список элементов, то нужен цикл для присвоения каждому элементу своего обработчика, либо делегирование, клик на общем родителе, смотри пример выше.
https://learn.javascript.ru/event-delegation

АртемБМ · #4 (**permalink**) 16.06.2020, 21:16

Допустим почти понял

А как теперь разделить события? Тоесть при нажатии определенной кнопки показывать определенные блоки?

<div class="projects-list">
 <div class="projects-item mobile-app ">
 </div>
 <div class="projects-item photography ">
 </div>
 <div class="projects-item web-design ">
 </div>
</div>

рони · #5 (**permalink**) 16.06.2020, 21:22

АртемБМ,
посмотрите второй пост и прочтите про dataset

примерно получится так https://javascript.ru/forum/misc/804...tml#post525579

АртемБМ · #6 (**permalink**) 17.06.2020, 23:01

Начал делать вот так:

let visibility = document.querySelector('[data-projects-visibility]');

document.querySelector('.projects-categories').addEventListener('click', ({target})=>{

visibility.removeAttribute("data-projects-visibility");

if(target.id = "mobile-app"){
		visibility.dataset.projectsVisibility = "Mobile-app";
	}

if(target.id = "photography"){
		visibility.dataset.projectsVisibility = "Photography";
	}

});

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

рони · #7 (**permalink**) 18.06.2020, 09:26

АртемБМ,
= это присвоить значение!!!
== это что-то сравнить!!!

рони · #8 (**permalink**) 18.06.2020, 09:50

АртемБМ,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .projects-list .projects-item{
        transition: .5s;
        transform: scaleY(0) translateX(-100%);
        opacity: 0;
        height: 0;
    }
    .projects-list .projects-item.visibility{
       transition: .8s;
       transform: scaleY(1)  translateX(0);
       opacity: 1;
       height: auto;
    }
    </style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.projects-categories').addEventListener('click', ({target})=>{
const cls = target.dataset.id;
document.querySelectorAll('.projects-list .projects-item').forEach(item => {
const add = cls == 'all' || item.classList.contains(cls);
item.classList.toggle('visibility', add)
})

})
  });
</script>
</head>
<body>
<div class="projects-categories">
	<button class="btn-projects-categories" data-id="all">All</button>
    <button class="btn-projects-categories" data-id="web-design">Web Design</button>
	<button class="btn-projects-categories" data-id="mobile-app">Mobile App</button>
	<button class="btn-projects-categories" data-id="illustration">Illustration</button>
	<button class="btn-projects-categories" data-id="photography">Photography</button>
</div>
<div class="projects-list">
 <div class="projects-item mobile-app ">mobile-app
 </div>
 <div class="projects-item photography ">photography
 </div>
 <div class="projects-item web-design ">web-design
 </div>
 <div class="projects-item illustration ">illustration
 </div>

</div>

</body>
</html>

АртемБМ · #9 (**permalink**) 18.06.2020, 16:40

Охх тыжж... Пардон, за такую тупость

АртемБМ · #10 (**permalink**) 18.06.2020, 16:49

Спасибо, люди добрые ! ) Наступит тот момент когда и я буду подсказывать новичкам!

Форум

Справочник

Discord чат

Курсы javascript