Как при нажатии на body удалить класс?

Question

[Анастасия]

У меня есть div в котором есть изображение. При нажатии на этот div добавляется класс (класс со стилем переворачивает это изображение на 180deg), и при повторном нажатии на div этот класс удаляется.
Мне нужно чтобы при нажатии вне этого divа класс удалялся
Код:

(function (document) {
    var div = document.getElementById('dropdownMenuButton');
    var icon = document.getElementById('arrow_lang');
    var open = false;

    div.addEventListener('click', function () {
        if (open) {
            icon.className = 'arrow_lang';
        } else {
            icon.className = 'arrow_lang open';
        }

        open = !open;
    });
})(document);

Я пробовала писать так:

(function (document) {
    var div = document.getElementById('dropdownMenuButton');
    var icon = document.getElementById('arrow_lang');
    var open = false;

    div.addEventListener('click', function (e) {
e.preventDefault();
        if (open) {
            icon.className = 'arrow_lang';
        } else {
            icon.className = 'arrow_lang open';
        }

        open = !open;
    });
document.body.addeventlistener('click', function() {
if (open) {
            icon.className = 'arrow_lang';
            open = !open;
}
});
})(document);

Но результата не было. Подскажите мою ошибку

Answer 1

[Mike Khromov]

Попробуйте поменять так
document.body.addEventListener -> document.addEventListener

Comments

[Анастасия]

Все работает. Но проблема в том что на первый клик вообще не реагирует. То есть только после второго нажатия на этот div добавляется класс, что в свою очередь создает проблему, потому что тогда логика с поворотами полностью утрачена.

Я пробовала заменить e.preventDefault() на e.stopPropagation(), но тогда dropdown от bootstrap не открывается вообще (этот скрипт мне как раз нужен для dropdown)

[Mike Khromov]

А ну так вам нужно отсеять dropdownMenuButton.
Как-то типа так:

document.addeventlistener('click', function(e) {
if (open && e.target !== div) {
            icon.className = 'arrow_lang';
            open = !open;
}

Суть в том что бы прослушиватель, который Вы вешаете на весь body игнорировал заход в div

[Mike Khromov]

И кстати советую как только open === false
удалять глобальное событие document.removeEventListener

Answer 2

[Петр]

Первое что попалось на глаза это в месте где вы вешаете событие на body у вас идет
document.body.addeventlistener()
а надо
document.body.addEventListener()