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

addEventListener wywołuje inne funkcje

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
167 wizyt
pytanie zadane 5 września 2017 w JavaScript 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 Guru (580,340 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

+1 głos
2 odpowiedzi 146 wizyt
0 głosów
1 odpowiedź 150 wizyt
pytanie zadane 11 listopada 2019 w JavaScript przez BlvckFox Gaduła (4,240 p.)
0 głosów
1 odpowiedź 92 wizyt
pytanie zadane 23 kwietnia 2019 w JavaScript przez gucisz Nowicjusz (160 p.)

89,777 zapytań

138,386 odpowiedzi

309,503 komentarzy

59,681 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 1088p. - Argeento
  2. 1032p. - nidomika
  3. 1024p. - rucin93
  4. 1020p. - Michal Drewniak
  5. 1014p. - Łukasz Eckert
  6. 1006p. - Mikbac
  7. 988p. - TheLukaszNs
  8. 963p. - JMazurkiewicz
  9. 960p. - adrian17
  10. 945p. - Jarosław Roszyk
  11. 941p. - Hubert Chęciński
  12. 920p. - Mawrok
  13. 914p. - overcq
  14. 859p. - ssynowiec
  15. 848p. - Adam Salamon
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

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

...