• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

addEventListener wywołuje inne funkcje

0 głosów
99 wizyt
pytanie zadane 5 września 2017 w JavaScript, jQuery, AJAX przez Midgard Początkujący (390 p.)
Mam pewien problem związany z nasłuchem. Otóż chciałem nasłuchiwać kliknięcia na dwa różne elementy div i w zależności od tego, który zostanie kliknięty wywoływać pewne funkcje. Jedna z nich służy do pokazania diva style.display = "block", druga natomiast do jego ukrycia (analogiczne none). Otwieranie faktycznie działa, niestety zamknięcie już nie. Kombinowałem troszkę z kodem i wartościami startowymi i okazuje się, że zamknięcie również działa, ale tylko w momencie, w którym nie istnieje funkcja otwierająca. Z testów wynika, że przy dwóch funkcjach wywołują się one obie, stąd style.display pozostaje ciągle jako block.


<!DOCTYPE HTML>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="style.css">
    
</head>
<body>

    <div id="image1" ><img src="arrow.png"/>
    <div id="modal">
        <div id="modal_view">
            tutututu
            <div id="close_sign">x</div>
            </div>
        </div>
    </div>
    
<script type="text/javascript" >
    
    var O2 = document.getElementById("image1");
    O2.addEventListener('click',OpenModal);
    
    var C1 = document.getElementById("close_sign");
    C1.addEventListener('click',CloseModal);
    
    
    function CloseModal(){
    document.getElementById("modal").style.display = "none";
}

function OpenModal(){
    document.getElementById("modal").style.display = "block";
}

    

    
    </script>
</body>
</html>

 

komentarz 5 września 2017 przez Midgard Początkujący (390 p.)
Mam pewien problem związany z nasłuchem. Otóż chciałem nasłuchiwać kliknięcia na dwa różne elementy div i w zależności od tego, który zostanie kliknięty wywoływać pewne funkcje. Jedna z nich służy do pokazania diva style.display = "block", druga natomiast do jego ukrycia (analogiczne none). Otwieranie faktycznie działa, niestety zamknięcie już nie. Kombinowałem troszkę z kodem i wartościami startowymi i okazuje się, że zamknięcie również działa, ale tylko w momencie, w którym nie istnieje funkcja otwierająca. Z testów wynika, że przy dwóch funkcjach wywołują się one obie, stąd style.display pozostaje ciągle jako block.

2 odpowiedzi

+1 głos
odpowiedź 5 września 2017 przez jankowa1ski Gaduła (3,560 p.)
Wydaje mi się że powodem jest to że twoj div clodemodal jest wewnatrz divu image1 to powoduje ze jak klikniesz w clodeModal to ten event klikniecia idzie jakby w góre i aktywuje tez listener image1. Event zachuwuje sie jak "babelek" czyli idzie w góre tu masz opis tego:

http://kursjs.pl/kurs/mouse.php#babelki
komentarz 5 września 2017 przez jankowa1ski Gaduła (3,560 p.)

PS tak jak napisał już @Comandeer lepiej uzyc klas np

.modalOpened

{

display:block

}

a domyąślnie modal ma display:none i jak klikasz to usuwasz klase lub dodajesz

np za pomoca modal.classList.toggle("modalOpened");

0 głosów
odpowiedź 5 września 2017 przez Comandeer Mentor (452,460 p.)

Nie ma sensu rozbijać obsługi tej samej rzeczy na dwie funkcje. Zrób z tego jedną. Dodatkowo zamiast bawić się bezpośrednio stylami, zastosuj klasę w CSS i po prostu ją przełączaj.

Podobne pytania

0 głosów
2 odpowiedzi 72 wizyt
0 głosów
1 odpowiedź 105 wizyt
0 głosów
1 odpowiedź 166 wizyt
pytanie zadane 19 czerwca 2018 w JavaScript, jQuery, AJAX przez Wisien Nowicjusz (170 p.)
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

62,361 zapytań

108,495 odpowiedzi

226,498 komentarzy

35,441 pasjonatów

Przeglądających: 227
Pasjonatów: 12 Gości: 215

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...