Logowanie

Nie widzi funkcji JS'a w oddzielnym pliku.

pytanie zadane 1 kwietnia 2018 w JavaScript przez WireNess Stary wyjadacz (11,240 p.)

Witam.

Mam problem z pewną funkcją w JavaScript. Otóż umieściłem kod funkcji w oddzielnym pliku, a po wywołaniu jej w onclick'u wyrzuca błąd:

Uncaught ReferenceError: menuDropdown is not defined

"menuDropdown" to oczywiście funkcja.

Reszta kodu (uproszczony do minimum):

<!-- index.html -->

<head>
    <script type="text/javascript" src="menu.js"></script>
</head>

<body>
    <div class="menu-icon" onclick="menuDropdown()">
        <i class="icon-menu"></i>
    </div>
</body>

/* style.css */

.menu-normal {
        display: none;
    }
.menu-responsive {
        display: block;
        position: absolute;
        background-color: #f6f6f6;
        width: 100%;
        top: 145px;
    }

document.addEventListener("DOMContentLoaded", function(event) {
    function menuDropdown() {
        var x = document.getElementById("menu");
    
        if(x.className == "menu-normal") {
            x.className = "menu-responsive"
        } else {
            x.className = "menu-normal";
        }
    }
});

Co może być powodem tego zamieszania? Możliwe, że popełniłem jakiś prosty błąd więc prosiłby wyrozumiałość.

PS: Jeżeli ktoś miałby jakiś problem dotyczący kodu to tutaj wklejam cały:

Pozdrawiam i życzę spokojnego wieczoru

1 odpowiedź

odpowiedź 1 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)
wybrane 1 kwietnia 2018 przez WireNess

Najlepsza

Nie rozumiem dlaczego zamykasz funkcję menuDropdown() w addEventListener. Wyrzuć ten listener i powinno działać.

komentarz 1 kwietnia 2018 przez WireNess Stary wyjadacz (11,240 p.)

W funkcji "menuDropdown" odwołuje się do elementu o danym id więc nie powinienem wykonać tej funkcji po wczytaniu całego dokumentu?

Mam wyrzucić całą funkcję czy tylko średnik?

komentarz 1 kwietnia 2018 przez WireNess Stary wyjadacz (11,240 p.)

No faktycznie bez tej funkcji wszystko działa. Ale dlaczego? Co w tej funkcji zrobiłem nie tak?

komentarz 1 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

Albo wywołujesz funkcję gdy kod się wczyta (onLoad) albo gdy DOM będzie gotowy (addEventListener), nie możesz roibić tych rzeczy na raz. Zdecyduj się na coś

komentarz 1 kwietnia 2018 przez WireNess Stary wyjadacz (11,240 p.)

To w takim razie jak poprawić tę funkcję, aby wywołać ją dopiero wtedy gdy wczytają się wszystkie elementy na stronie?

Czy pomoże przeniesienie dodania skryptu na koniec pliku? Tzn:

<head></head>
<body>

     <!-- Jakis tam kod strony -->

    <script src="menu.js"></script>

</body>

komentarz 1 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

Script na koniec strony, wywal onLoad w body, i zrób addeventListener('DOMContentLoaded') i wtedy wywołaj twoją funkcję.

komentarz 1 kwietnia 2018 przez WireNess Stary wyjadacz (11,240 p.)

@Mariusz08 tutaj się wzorowałem

komentarz 1 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

No, kurs fajny, ale chyba coś im nie wyszło ;)

komentarz 1 kwietnia 2018 przez WireNess Stary wyjadacz (11,240 p.)

Moment, w której linii użyłem onload? Wydaje mi się, że tego nie zrobiłem.

komentarz 1 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

Mój błąd ;) Zrobiłeś onClick na divie

komentarz 1 kwietnia 2018 przez WireNess Stary wyjadacz (11,240 p.)

Zdarza się W takim razie addEventListener dodać czy nie?

komentarz 1 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

addEventListener - tak

onClick - nie

komentarz 1 kwietnia 2018 przez WireNess Stary wyjadacz (11,240 p.)

To jak wtedy wywołać tą funkcję po kliknięciu ? :D

Tak, wiem - zadaje sporo pytań, ale kto pyta nie błądzi

komentarz 1 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

addEventListener('onClick')

komentarz 1 kwietnia 2018 przez WireNess Stary wyjadacz (11,240 p.)

Czy teraz jest wszystko dobrze? (onClick'a na div'ie usunąłem)

document.addEventListener("DOMContentLoaded", function() {
    
    document.getElementsByClassName("menu-icon").addEventListener("click",function(){
        var x = document.getElementById("menu");

        if(x.className == "menu-normal") {
            x.className = "menu-responsive"
        } else {
            x.className = "menu-normal";
        }
    });

})

komentarz 1 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

a działa Ci to? Jeśli tak to wszystko dobrze xd

komentarz 1 kwietnia 2018 przez WireNess Stary wyjadacz (11,240 p.)

Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

Nie działa

komentarz 1 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

document.getElementsByClassName(...)[0]

komentarz 1 kwietnia 2018 przez WireNess Stary wyjadacz (11,240 p.)

Okej jest :D

Dodałem do tego div'a identyfikator i działa :D

Dzięki za pomoc i poświęcony czas :D

Wesołych świąt! Do zobaczenia!

Podobne pytania

0 głosów

1 odpowiedź 472 wizyt

JavaScript program nie widzi funkcji

pytanie zadane 20 lipca 2018 w JavaScript przez Bish0p Obywatel (1,940 p.)

0 głosów

1 odpowiedź 614 wizyt

Kompilator nie widzi zaprzyjaźnionych funkcji w klasie (C++)

pytanie zadane 2 sierpnia 2018 w C i C++ przez Sic Dyskutant (8,510 p.)

+1 głos

1 odpowiedź 254 wizyt

Wywołanie funkcji jquery z pliku "b.js" w pliku "a.js"

pytanie zadane 28 marca 2018 w JavaScript przez Jungle Goat Nowicjusz (160 p.)

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...