Как удалить класс js по свободному месту?

Question

[Руслан Кириченко]

Ребята доброй ночи! Изучаю JS - я новичок, написал простой скрипт при клике на блок добавляется класс и добавляется еще один блок, но когда по нем кликаешь то класс удаляется и удаляется второй блок который скрыт. Но мне надо сделать так чтобы класс удаляется не только при клике по первому блоку а при клике свободному месту. Помогите!!!!

<div class="welcome" onclick="NotificationClickMenu();">Hello</div>
<div class="test"> Lorem</div>

.welcome {padding: 10px 40px; width: 150px; height: 150px; font-size: 20px; color: #fff; background-color: #000; position: relative;}
.test {width: 250px; height: 200px; background-color: lime; visibility: hidden; opacity: 0;}
.test.active {opacity: 1; visibility: visible; position: absolute;  top: 20%; left: 20%;}

function NotificationClickMenu() {
    const notification = document.querySelector('.test')
    notification.classList.toggle('active')
}

Answer 1

[basasy]

<div class="welcome">Hello</div>
    <div class="test">Lorem</div>

    <script>
        const notification = document.querySelector('.test')
        window.addEventListener('click', () => {
            notification.classList.toggle('active')
        })
    </script>

Comments

[Руслан Кириченко]

Спасибо все работает) Но почему появляется блок - когда второй раз кликаешь тоже по свободному пространству? Ведь надо сделать так чтобы класс убирался только тогда когда кликаешь по свободному?

[basasy]

// вынес переменную за пределы функции
        const notification = document.querySelector('.test')

        // слушатель событий на клик по всему документу, 
        // но делают на родительский элемент 
        document.addEventListener('click', (e) => {
            // 1.1 Проверяем, "!" Не активен ли класс .active, 
            // если нет, то уходим глубже к следующему IF 
            if (!notification.classList.contains('active')) {
                // 2. Тут мы смотрим, если клик не на элемент "welcome", то делаем return
                if (e.target.classList.value !== "welcome") {
                    return;
                }
                // если на элемент "welcome" , то применяем toggle
                notification.classList.toggle('active')
            } else {
                // 1.2 Если элемент содержит .active, то клик по любому месту сделает toggle
                notification.classList.toggle('active')
            }
        })

Менюшку делаешь?

[Руслан Кириченко]

basasy, Я даже не знаю как тебя поблагодарить! Спасибо самое оно!Нет не меню, сверстал макет, но стоил задача немного оживить макет. Гуглил толком на эту тему - толком нет ничего..Спасибо еще раз)

[Руслан Кириченко]

basasy, Кстати вопрос? Можешь посоветовать сайты или ресурсы для изучения JS. Пару сайтов нашел там статьи еще 2009-2011 года)

[basasy]

Книга "JS ниндзя"
Канал Владлен Минин
Документация -> MDN
PS Сам прошел курс на ГБ, мне понравилось.

[Руслан Кириченко]

basasy, Cпасибо, ГБ - это GitBrains?

[basasy]

Руслан Кириченко, ага)