Не работает простейшая функция О_0
Товарищи! Задумал сделать менюшку (при клике на разные кнопки открывается разный контент). Вот такой незамысловатый код:
<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_о |
<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>
Пример использования делегирования событий |
АртемБМ,
если список элементов, то нужен цикл для присвоения каждому элементу своего обработчика, либо делегирование, клик на общем родителе, смотри пример выше. https://learn.javascript.ru/event-delegation |
Допустим почти понял :) А как теперь разделить события? Тоесть при нажатии определенной кнопки показывать определенные блоки?
<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> |
АртемБМ,
посмотрите второй пост и прочтите про dataset примерно получится так https://javascript.ru/forum/misc/804...tml#post525579 |
Начал делать вот так:
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";
}
});
но данные изменяются только при первом клике, потом ничего не работает :) |
АртемБМ,
= это присвоить значение!!! == это что-то сравнить!!! |
АртемБМ,
<!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>
|
Охх тыжж... Пардон, за такую тупость;)
|
Спасибо, люди добрые ! ) Наступит тот момент когда и я буду подсказывать новичкам! :)
|
| Часовой пояс GMT +3, время: 17:30. |