event target funktoniert nicht

strong97

hi,

ich sitze seit 2 Stunden dran um den Fehler zu finden. Weiß jemand von euch warum die Funktion mit if(event.target) nicht funktoniert?

Es erscheint keine Fehlermeldung aber die Klasse "show-modal" verschwindet einfach nicht.

html

Spoiler anzeigen

HTML

<button type="button" name="delete_bookmark" class="delete-bookmark-new"><i class="fas fa-bookmark"></i></button>

<div style="position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    z-index: 100;" class="bookmark-new">
                <h2 style="color:red;font-size:5em;">Ein Text</h2>
            </div>

Alles anzeigen

CSS:

Spoiler anzeigen

CSS

.show-modal {
   opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1.0) !important;
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s !important;
}

Spoiler anzeigen

JavaScript

$('.delete-bookmark-new').on('click', function() {
                           
                        function toggle() {
                            $('.bookmark-new).addClass('show-modal');
                            var open = $('.bookmark-new).hasClass('show-modal');
                            
                            
                            if(!(open)) {
                                $('.bookmark-new).addClass('show-modal');
                            }
                        }
                        
                        toggle();
                        
                        function thewindow(event) {
                            if(event.target === $('.bookmark-new)) {
                                $('.bookmark-new).removeClass('show-modal');
                            }
                        }
                        
                        window.addEventListener('click', thewindow);
                    
                    })

Alles anzeigen

Stef

Hey,

du hast da die einfachen Anführungszeichen zum großen Teil vergessen. Bei .bookmark-new hauptsächlich. Du siehst ja auch, dass der Code ab Zeile 4 rötlich dargestellt wird. Dies kann ein Hinweis für ein Fehler sein.

Versuche es mal so und gebe uns dann bitte Rückmeldung:

JavaScript

$('.delete-bookmark-new').on('click', function() {
                           
                        function toggle() {
                            $('.bookmark-new').addClass('show-modal');
                            var open = $('.bookmark-new').hasClass('show-modal');
                            
                            
                            if(!(open)) {
                                $('.bookmark-new').addClass('show-modal');
                            }
                        }
                        
                        toggle();
                        
                        function thewindow(event) {
                            if(event.target === $('.bookmark-new')) {
                                $('.bookmark-new').removeClass('show-modal');
                            }
                        }
                        
                        window.addEventListener('click', thewindow);
                    
                    })

Alles anzeigen

Grüße,

Stef

Jetzt mitmachen!