I have a set of function that takes care of a animation. As of now the funtions get triggered if I click anywhere else than the targeted HTML element. I have tired to make a if statement that only allows the funtion to trigger if the targeted element also contains a specific class, but for some reason the functions still get triggered, even if i set the even lister to a class that is defenetly not apart of my website.
Any ideas of why is this happaning?

HTML

<ul class="nav">
     <li class="scroll-to-section"><a href="#homepage">Heim</a><ul class="arrow-up"></ul></li>
     <li class="scroll-to-section"><a href="#about">Geschäft</a><ul class="arrow-up"></ul></li>
     <li class="scroll-to-section"><a href="#services">Dienstleistungen</a><ul class="arrow-up"></ul></li>
     <li class="scroll-to-section"><a href="#contactus">Kontakt</a><ul class="arrow-up"></ul></li> 
     <li class="language-selection hidden-languege-selecton">
                    <a href="Bushmann-partner.html" style="z-index: 2;"><img class="language-logo language-logo-hidden" src="germany.png"></a><a href="Bushmann-partner.html"><h3 class="language-selection-text language-selection-hidden ">English</h3></a>
                    <a href="Bushmann-partner-German.html" style="z-index: 1;"><img class="language-logo language-logo-2 language-logo-hidden" src="united-kingdom.png"></a><a href="Bushmann-partner-German.html"><h3 class="language-selection-text language-selection-hidden ">Deutsch</h3></a>
     </li>
            <li style="list-style: none;"><img class="language-selection-img " src="germany.png"></li>  
 </ul>

Javacript

document.addEventListener("DOMContentLoaded", function() {
    const languageSelectionImg = document.querySelector('.language-selection-img');
    const languageSelection = document.querySelector('.language-selection');
    const languageLogo2 = document.querySelector('.language-logo-2');
    const languageSelectionTexts = document.querySelectorAll('.language-selection-text');
    const languageLogoHidden = document.querySelectorAll('.language-logo-hidden');

    function removeHiddenClass() {
        setTimeout(() => languageSelection.classList.remove('hidden-languege-selecton'), 500);
    }

    function addSelectionAnimationClass() {
        setTimeout(() => {
            languageSelectionTexts.forEach(text => {
                text.style.display = 'block';
                text.classList.add('language-selection-animation');
                text.addEventListener('animationend', () => text.classList.remove('language-selection-hidden', 'language-selection-animation'), { once: true });
            });
        }, 0);
    }

    function addLogo2AnimationClass() {
        languageLogo2.classList.add('language-logo-2-animation');
    }

    function reverseLanguageTextAnimation() {
        languageSelectionTexts.forEach(text => {
            text.classList.add('reverse-language-text-selection-animation');
            text.addEventListener('animationend', () => text.classList.remove('reverse-language-text-selection-animation'), { once: true });
        });
    }

    function addHiddenClassToLogos() {
        languageLogoHidden.forEach((logo, index) => {
            setTimeout(() => logo.classList.add('language-logo-hidden'), (index + 1) * 1000);
        });
    }

    function addLanguageSelectionHidden() {
        setTimeout(() => languageSelectionTexts.forEach(text => text.classList.add('language-selection-hidden')), 1085);
    }

    function removeLogo2AnimationClass() {
        languageLogo2.classList.remove('language-logo-2-animation');
        setTimeout(() => languageLogo2.classList.add('reverse-language-logo-2-animation'), 500);
    }

    function removeReverseAnimationClass() {
        languageLogo2.classList.remove('reverse-language-logo-2-animation');
    }

    function addHiddenClassWithDelay() {
        setTimeout(() => languageSelection.classList.add('hidden-languege-selecton'), 1090);
    }

    languageSelectionImg.addEventListener('click', function() {
        removeHiddenClass();
        addSelectionAnimationClass();
        addLogo2AnimationClass();
    });

    document.addEventListener('click', function(event) {
        if (!languageSelectionImg.contains(event.target)) {
            removeLogo2AnimationClass();
            addHiddenClassWithDelay();
            addLanguageSelectionHidden();
            reverseLanguageTextAnimation();
            addHiddenClassToLogos();
        }
    });

    languageLogo2.addEventListener('animationend', removeReverseAnimationClass);
});

i added an if statement to the eventlistener but even if I set the class that supposed to be contained to something that I defenetly not use on my website the functions gets triggered.