Muszę użyć waniliowego JavaScript do projektu. Mam kilka funkcji, z których jedną jest przycisk otwierający menu. Działa na stronach, na których istnieje identyfikator docelowy, ale powoduje błąd na stronach, na których identyfikator nie istnieje. Na tych stronach, na których funkcja nie może znaleźć identyfikatora, pojawia się błąd „Nie można odczytać właściwości 'addEventListener' o wartości null” i żadna z moich innych funkcji nie działa.
Poniżej znajduje się kod przycisku otwierającego menu.
function swapper() {
toggleClass(document.getElementById('overlay'), 'open');
}
var el = document.getElementById('overlayBtn');
el.addEventListener('click', swapper, false);
var text = document.getElementById('overlayBtn');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};
Jak sobie z tym radzę? Prawdopodobnie muszę zawinąć ten kod w inną funkcję lub użyć instrukcji if / else, tak aby szukał identyfikatora tylko na określonych stronach, ale nie był pewien dokładnie.
class
w swoim html zamiastid
i wzywaszgetElementById
w swoich skryptach.Odpowiedzi:
Myślę, że najłatwiejszym podejściem byłoby po prostu sprawdzenie,
el
czy nie jest zerowe, przed dodaniem detektora zdarzeń:źródło
null
przed zamontowaniem elementu reagującego!Wygląda na
document.getElementById('overlayBtn');
to, że powraca,null
ponieważ jest wykonywany przed pełnym załadowaniem DOM.Jeśli umieścisz tę linię kodu pod
wtedy będzie działać bez problemu.
Przykład:
źródło
Miałem podobną sytuację. Dzieje się tak prawdopodobnie dlatego, że skrypt jest wykonywany przed załadowaniem strony. Umieszczając skrypt na dole strony, ominąłem problem.
źródło
Otrzymałem ten sam błąd, ale sprawdzenie zerowej wartości nie pomogło.
Rozwiązaniem, które znalazłem, było umieszczenie mojej funkcji w detektorze zdarzeń, aby cały dokument sprawdzał, kiedy zakończy się ładowanie DOM.
Myślę, że dzieje się tak, ponieważ używam frameworka (angular), który dynamicznie zmienia moje klasy HTML i identyfikatory.
źródło
Po prostu bcz twój JS zostanie załadowany przed częścią HTML, więc nie może znaleźć tego elementu. Po prostu umieść cały kod JS w funkcji, która zostanie wywołana po załadowaniu okna.
Możesz także umieścić swój kod JavaScript poniżej html.
źródło
skrypt ładuje się przed treścią, zachowaj skrypt po treści
źródło
Umieść skrypt na końcu tagu body.
źródło
Dzięki @Rob M. za jego pomoc. Tak wyglądał ostatni blok kodu:
źródło
Po prostu dodałem „async” do mojego tagu skryptu, co prawdopodobnie rozwiązało problem. Nie jestem pewien dlaczego, jeśli ktoś może wyjaśnić, ale to zadziałało. Domyślam się, że strona nie czeka na załadowanie skryptu, więc strona ładuje się w tym samym czasie, co JavaScript.
Async / Await umożliwia nam pisanie kodu asynchronicznego w sposób synchroniczny. to po prostu cukier składniowy używający generatorów i instrukcji yield do „wstrzymania” wykonywania, co daje nam możliwość przypisania go do zmiennej!
Oto link referencyjny - https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da
źródło
Napotkałem ten sam problem i sprawdziłem, czy nie ma wartości null, ale to nie pomogło. Ponieważ skrypt ładował się przed załadowaniem strony. Zatem samo umieszczenie skryptu przed tagiem end body rozwiązało problem.
źródło
Jak powiedzieli inni, problem polega na tym, że skrypt jest wykonywany przed załadowaniem strony (aw szczególności elementu docelowego).
Ale nie podoba mi się rozwiązanie polegające na zmianie kolejności treści.
Preferowanym rozwiązaniem jest umieszczenie modułu obsługi zdarzeń na zdarzeniu onload strony i ustawienie tam detektora. Zapewni to załadowanie strony i elementu docelowego przed wykonaniem przypisania. na przykład
źródło
Mam zbiór cytatów wraz z nazwiskami. Używam przycisku aktualizacji, aby zaktualizować ostatnią wycenę powiązaną z określoną nazwą, ale po kliknięciu przycisku aktualizacji nie aktualizuje się. Dołączam kod poniżej dla pliku server.js i zewnętrznego pliku js (main.js).
main.js (zewnętrzny js)
plik server.js
źródło
Dziękuję wszystkim, Załaduj skrypty na określonych stronach, których używasz, nie dla wszystkich stron, czasami używając swiper.js lub innej biblioteki może to spowodować ten komunikat o błędzie, jedynym sposobem rozwiązania tego problemu jest załadowanie biblioteki JS na określonych stronach ten identyfikator istnieje i zapobiega ładowaniu tej samej biblioteki na wszystkich stronach.
Mam nadzieję, że to ci pomoże.
źródło
Miałem ten sam problem, ale mój identyfikator był obecny. Więc próbowałem dodać "window.onload = init;" Następnie opakowałem mój oryginalny kod JS funkcją init (nazwij to, jak chcesz). To zadziałało, więc przynajmniej w moim przypadku dodawałem detektor zdarzeń przed załadowaniem mojego dokumentu. To może być również to, czego doświadczasz.
źródło
Dzieje się tak, ponieważ element nie został załadowany w czasie wykonywania pakietu js.
Przeniósłbym
<script src="sample.js" type="text/javascript"></script>
na sam dółindex.html
pliku. W ten sposób możesz zapewnić wykonanie skryptu po przeanalizowaniu i wyrenderowaniu wszystkich elementów HTML.źródło
Dodawaj wszystkie detektory zdarzeń, gdy okno się ładuje. Działa jak urok bez względu na to, gdzie umieścisz tagi skryptu.
źródło
load
jest również przestarzałe z tego samego powodu. DOMContentLoaded jest preferowanym sposobem, ponieważ uruchamia się dopiero po całkowitym narysowaniu DOM.