classList.add nie działa

Dlaczego w poniższym kodzie po odpaleniu pierwszej części kodu el.classList.add('compact'); nie działa? console.log('Clicked'); działa

if(document.querySelector('#header-search.compact')){
    var el = document.querySelector('#header-search.compact');
        el.addEventListener('click', function() {
            el.classList.remove('compact');
    });
}

if(document.getElementById('header-search')){
    document.querySelector('#header-search .close').addEventListener('click', function() {
        var el = document.getElementById('header-search');
        console.log('Clicked');
        el.classList.add('compact');
    });
}

mmx napisał(a):

Dlaczego w poniższym kodzie po odpaleniu pierwszej części kodu el.classList.add('compact'); nie działa? console.log('Clicked'); działa

if(document.querySelector('#header-search.compact')){
    var el = document.querySelector('#header-search.compact');
        el.addEventListener('click', function() {
            el.classList.remove('compact');
    });
}

if(document.getElementById('header-search')){
    document.querySelector('#header-search .close').addEventListener('click', function() {
        var el = document.getElementById('header-search');
        console.log('Clicked');
        el.classList.add('compact');
    });
}

Tutaj błędu nie masz, musi być coś nie tak z samym elementem. Pojawia się jakiś błąd w konsoli? Kiedy zamiast console.log("Clicked") dasz console.log(el) to co się pojawia?

Zwraca

<div id="header-search" class="">