1.HTML DOM
Kiedy strona jest wczytywana w przeglądarkę tworzony jest tzw. DOM czyli Document Object Model strony. O tym powinien wiedzieć każdy, który ma styczność z kodem. Zaczynając od góry tworzony jest Document → <html> → <head> → <body> itd…
Dzięki DOM jesteśmy w stanie znaleźć element i poprzez js przypisać mu akcję np. click. Przypisując akcję w czystym js używamy addEventListener. To są podstawy podstaw. Podstawą jest też sposób zmiany zawartości elementu poprzez innerHTML.
2.addEventListener fires only once
Zdarzenie jakie przypisujemy elementowi będzie obowiązywać do czasu, aż zostanie on “ponownie stworzony”. I tutaj pojawiło się rozwiązanie, dlaczego mój formularz walidował się jedynie raz. Otóż zmiana elementu poprzez innerHTML realizowana jest wyrenderowaniem w danym miejscu elementu na nowo. Nowy element nie ma “zarejestrowanego” zdarzenia, które jest przypisane na samym początku, gdy ładowany jest skrypt js.
Czasem warto wrócić do podstaw, im dalej idziemy zapominamy o elementarnej wiedzy.