Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   добавление класс диву (https://javascript.ru/forum/misc/76223-dobavlenie-klass-divu.html)

Hovik 14.12.2018 21:35

добавление класс диву
 
Добры день всем не подскажите где в коде ошибка

document.getElementsByClassName("page").onclick = function() {
var element = document.getElementById("action");
element.classList.add("action-out");
};


при нажатье на любом из дивов класс page , в id action будет добавляться класс action-out

Nexus 14.12.2018 22:31

Цитата:

Сообщение от Hovik
при нажатье на любом из дивов класс page , в id action будет добавляться класс action-out

Это как это?
У вас в коде ошибка в первой строке.
getElementsByClassName возвращает коллекцию элементов, а не конкретный элемент, поэтому назначение ей свойства onclick ничего не даст.
https://developer.mozilla.org/ru/doc...HTMLCollection

Hovik 14.12.2018 22:44

Да вы правы getElementsByClassName возвращает коллекцию элементов, но мне нужно чтобы все диви с классом page выполняли одну функцию

Nexus 14.12.2018 23:01

Hovik, ну тогда у вас два варианта действий:
1. Делегировать обработчик события ближайшему общему для всех этих дивов родителю, тогда у вас одна функция будет обрабатывать нажатия на сразу все дивы, либо...;
2. Пробежаться в цикле по всем элементам коллекции и каждому элементу повешать свой обработчик события.

Вот пример кода первого варианта, предполагаю, что ближайший общий родитель - body:
document.body.addEventListener('click', function(e) {
    if (!e.target.classList.contains('page'))
        return;

    document.getElementById("action").classList.add("action-out");
});

addEventListener лучше, чем onclick=function(){}, потому что.
e.target - это.
С classList вы, видимо, знакомы.

Hovik 14.12.2018 23:32

Nexus,
Спасибо за помощь и за урок, когда-нибудь я тоже обязательно помогу новичкам


Часовой пояс GMT +3, время: 03:26.