Właściwość document.querrySelectorAll

pytanie zadane 27 kwietnia 2021 w JavaScript przez Fonteinbloem Użytkownik (660 p.)
edycja 27 kwietnia 2021 przez Fonteinbloem

Hej, więc mam kod w javascripcie, który generuje alfabet i wkleja do html'a, każda litera w innym divie. Chciałbym tym literom nadać event na kliknięcie i problem polega na tym, że prawdopodobnie javascript wczytuje najpierw cały kod (w tym pobranie liter za pomocą querySelectorAll), podczas gdy one jeszcze nie istnieją, bo alfabet tworzy się po załadowaniu całej stony. W jaki sposób można to rozwiązać? Wiem, że można te divy z literami dodać od razu do html'a, ale chciałbym, aby obeszło się bez tego.

const alphabet = {1:"a", 2:"b", 3:"c", 4:"d", 5:"e", 6:"f", 7:"g", 8:"h", 9:"i", 10:"j", 11:"k", 12:"l", 13:"m",  14:"n", 15:"o", 16:"p", 17:"q", 18:"r", 19:"s", 20:"t", 21:"u", 22:"v", 23:"y", 24:"z"};
const alphabetDiv = document.querySelector('#alphabet');

function createAlphabet() {
    let alphabetContent = '';
    for (i=1; i<=Object.keys(alphabet).length; i++) {
        alphabetContent+=`<div class="alphabet-letter">${(alphabet[i]).toUpperCase()}</div>`;
    }
    alphabetDiv.innerHTML = alphabetContent;
}


document.addEventListener("DOMContentLoaded", createAlphabet);


let letters = document.querySelectorAll('.alphabet-letter');

komentarz 27 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż kod, to łatwiej będzie pomóc.

komentarz 27 kwietnia 2021 przez edutomek Dyskutant (8,380 p.)

Żaden ze mnie frontendowiec, ale czy nie byłoby lepszym pomysłem ustawienie handlera onclick na kontenerze, w którym te literki są, a poszczególnym literkom nadanie jakiegoś propsa (choćby id), na podstawie którego w handlerze można byłoby rozpoznać, która literka została kliknięta?

Miałem kiedyś duuużą tabelę, w której każda komórka miała własne handlery onclick (plus jeszcze inne paskudy), działało to strasznie wolno i "zamulało" komputer.

1	komentarz 27 kwietnia 2021 przez Fonteinbloem Użytkownik (660 p.) @ScriptyChris, Zedytowałem pytanie i dodałem kod

komentarz 27 kwietnia 2021 przez Fonteinbloem Użytkownik (660 p.)

Spróbuję tym sposobem, jeżeli zadziała, to dzięki za pomoc. Ale chętnie też poznam inne sposoby od innych użytkowników, jeśli w ogóle takie są.

komentarz 27 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Na oko to zbyt wcześnie pobierasz elementy za pomocą querySelector i querySelectorAll, bo przed załadowaniem strony - wnioskując po użyciu listenera na event DOMContentLoaded. Pobieraj te elementy, gdy DOM będzie gotowy - czyli od biedy w funkcji createAlphabet, a lepiej jakbyś do tego listenera podpiął bardziej ogólną funkcję, w której zainicjujesz potrzebne zmienne i następnie wywołaj tam funkcję createAlphabet.

komentarz 27 kwietnia 2021 przez Fonteinbloem Użytkownik (660 p.)

Rozumiem, pomyślę jak to zrobić, dzięki!

2 odpowiedzi

odpowiedź 27 kwietnia 2021 przez Comandeer Guru (602,340 p.)

Jeśli generujesz te litery bezpośrednio w kodzie JS, to faktycznie, spróbują się pobrać zanim dojdzie do zdarzenia DOMContentLoaded.

Ja bym poszedł w stronę event delegation i przypiął się do elementu #alphabet a same litery rozróżniał przy pomocy event.target. Do tego o wiele lepiej jest używać button do elementów klikalnych, bo choćby można je sfocusować.

Widziałbym to jakoś tak: https://jsfiddle.net/Comandeer/a6e7pjg1/