✔ Ausgabe trotz if um DOM-Element zu überprüfen

[Jan-Frederik Stieler]

Hallo,

bei meinem Script wird beim console.log() null und danach die Fehlermeldung Cannot read property 'classList' of null ausgegeben.
Aber eigentlich versuche ich diese Ausgabe ja per if zu unterbinden. Warum funktioniert das nicht wenn das Element nicht vorhanden ist? Also dann dürfte da doch nichts ausgegeben werden, auch keine Fehlermeldung.

function replaceClass(element, firstClass, secondClass) {
    console.log(element);
    if (element.classList.contains(firstClass)) {
        element.classList.remove(firstClass);
        element.classList.add(secondClass);
    } else {
        element.classList.remove(secondClass);
        element.classList.add(firstClass);
    }
}
       
mainSliderFlkty.on('settle', function(index) {
    let actualSlide = document.querySelectorAll('.carousel-cell')[index];
    let rsArtistImg = actualSlide.querySelector('.rsArtistImg');
    let rsHeadline = actualSlide.querySelector('.rsHeadline');

    if(rsArtistImg){
        replaceClass(rsArtistImg, 'fade-out', 'fade-in');
    }

    if(rsHeadline){
        replaceClass(rsArtistImg, 'fade-out', 'fade-in');
    }
});

 

[Sempervivum]

Zunächst mal ist zu dieser Zeile:

mainSliderFlkty.on('settle', function(index) {

zu sagen, dass an die anonyme Funktion standardmäßig das Event übergeben wird und nicht, was Du vermutlich beabsichtigst, eine Variable index.
Mache ich einen Testaufbau, so bekomme ich das Ergebnis wie kommentiert:

    <button id="main-slider-flkty">Klick!</button>
    <div class="carousel-cell"></div>
    <script>
        function replaceClass(element, firstClass, secondClass) {
            console.log(element);
            if (element.classList.contains(firstClass)) {
                element.classList.remove(firstClass);
                element.classList.add(secondClass);
            } else {
                element.classList.remove(secondClass);
                element.classList.add(firstClass);
            }
        }
        mainSliderFlkty = $('#main-slider-flkty');
        mainSliderFlkty.on('click', function (index) {
            // index ist das Event, d. h. das Ergebnis der folgenden Zeile ist "undefined":
            let actualSlide = document.querySelectorAll('.carousel-cell')[index];
            // Bei der folgenden Zeile fliege ich heraus mit
            // "Cannot read property 'querySelector' of undefined"
            let rsArtistImg = actualSlide.querySelector('.rsArtistImg');
            let rsHeadline = actualSlide.querySelector('.rsHeadline');

            if (rsArtistImg) {
                replaceClass(rsArtistImg, 'fade-out', 'fade-in');
            }

            if (rsHeadline) {
                replaceClass(rsArtistImg, 'fade-out', 'fade-in');
            }
        });
    </script>

Bist Du sicher, dass es nicht noch irgend wo anders ein console.log gibt, das die genannte Ausgabe erzeugt?

 

[Jan-Frederik Stieler]

Hi,
Danke für Deine Antwort.
Das mit der anonymen Funktion ist nicht das Problem. Das ist ja der Flickity Slider und der bekommt bei dem Callback den Index aus dem Event.

Ich denke ich hab den Fehler gefunden.
Beim if (rsHeadline) versuche ich ja nochmal auf in der Funktion replaceClass auf den Selektor rsArtistImg zuzugreifen.
Das ist ja falsch, hier müsste es dann rsHeadline heißen.
Und somit hab ich wieder die Fehlerausgabe die ich eigentlich umgehen will .

Hier hab ich inzwischen auch einen kleinen Test gebaut:JS Bin

Grüße