getElementsByKlassName dla wielu czlonków klasy

Question

Cześć, próbuję zrobić modalboxa pojawiającego się na ekranie po kliknięciu w konkretne komórki tabeli. Te komórki to tak naprawdę dni w kalendarzu, który programuję. Chce, aby zawartość modala była różna zależnie od klikniętego dnia, lecz nie wszystkie dni powinny go w ogóle otwierać. Gdy próbuję zrobić:

var btn = document.getElementsByClassName("wydarzenie");

o później dodaje onclicka do btn to żadna z komórek nie otwiera modala. Gdy dodam [0] na końcu tej linijki to wszystko otwiera się poprawnie, lecz tylko dla pierwszej komórki o klasie wydarzenie. Jak zrobić coś takiego, żeby wszsytkie komórki z tej klasy otwierały modalboxa? Może zrobić jakąś pętlę, która wykona tę linijkę i pododaje na końcu [0], [1], [2], itd.?

Comments

Już sobie jakoś poradziłem, ale może jest jakiś lepszy sposób, to zostawię to pytanie jeszcze otwarte. Moje rozwiązanie:

var btn = new Array(4);
      for(var i = 0; i < 4; i++)
      {
        btn[i] = document.getElementsByClassName("wydarzenie")[i];
        btn[i].onclick = function() {
          modal.style.display = "block";
        }
      }

(Ta czwórka w pętli to tak tymczasowo, bo chciałem sprawdzić czy to w ogóle będzie działać)

Answer 1

Użyj pętli, która zrobi daną akcję dla wszystkich elementów w liście zwracanej przez getElementsByClassName

Comments

Czy po zrobieniu var btn = document.getElementsByClassName("wydarzenie")
btn jest listą?

---

Można tak powiedzieć, choć tak na prawdę jest kolekcją - https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

---

Tak, technicznie jest kolekcją, której zawartość może być modyfikowana, dlatego warto użyć Array.from, żeby mieć pewność, że nie usunie się jakiś element podczas przechodzenia pentlą.

---

Mógłbyś podać przykład jak to wykonać? Dopiero zaczynam naukę javascriptu

---

Aktualnie masz coś takiego:

var btn = document.getElementsByClassName("wydarzenie")[0];

// twoja akcja, np. ustawienia tła na czerwone
btn.style.background = 'red'; 

To możesz użyć pentli w taki sposób:

for (const element of document.getElementsByClassName("wydarzenie")) {
    // twoja akcja, np. ustawienia tła na czerwone
    element.style.background = 'red'; 
}

Tylko uwaga: Jeżeli jako twoja akcja będziesz usuwał klasę wydarzenie z tego elementu, to ta pentla zacznie omijać pewne elementy. W takim przypadku musisz zastosować coś takiego:

for (const element of Array.from(document.getElementsByClassName("wydarzenie"))) {
    // twoja akcja, np. ustawienia tła na czerwone
    element.style.background = 'red'; 
}

 

Answer 2

nie musisz podpinać listenera pod każdy przycisk, możesz zrobić to inaczej:

<ul id="days">
  <li data-open-modal/>1 otwiera</li>
  <li data-open-modal/>2 otwiera</li>
  <li />3 nie otwiera</li>
  <li data-open-modal/>4 otwiera</li>
</ul>

Dla elementów, które mają otwierać modala dodaję atrybut data-open-modal, i następnie zapinam listener click tylko na parencie:

const days = document.getElementById('days');
days.addEventListener('click', e => {
  if (e.target.dataset.openModal !== undefined) {
    alert(`modal otwarty z pola: ${e.target.textContent}`);
  }
})

i w JS sprawdzam, czy kliknięty element posiada odpowiednie pole openModal nie będące undefined. Ja bym poszedł raczej w tę stronę, wtedy z poziomu templatki ustawiasz sobie latwo jakie pola mają być otwieralne, np. przy ich generowaniu, a listener zapięty na parencie po prostu sprawdza sobie parametry klikniętego pola.

Comments

Wow, dużo się tu dzieje i szczerze mówiąc jako osoba początkująca nie za bardzo wiem o co chodzi. Mógłbyś to wytłumaczyć? Dodam, że modala tworzę według tego schematu: modal box'a    Dzięki

Answer 3

Metoda getElementsByClassName, zwraca obiekt podobny do tablicy, zawierający wszystkie elementy, które mają przypisaną daną klasę.

Twoja zmienna btn - przechowuje właśnie taką niby tablice (obiekt klasy HTMLCollection), z konkretnymi elementami. Ty właśnie musisz komunikować się z tymi elementami. Możesz zrobić tutaj pętle, która dla Twojej tablicy (w twoim kodzie to jest btn) doda jakieś zdarzenie etc.

Comments

Dzięki, nie wiem jednak, jak iterować się po takiej kolekcji. Mógłbyś podać przykład? Chciałbym też, żeby modal wiedział z jakiej komórki został otwarty. Czy ten sposób mi to umożliwi?

Answer 4

Tak, najlepiej to zrobić pętlą. Żeby chwycić wszystkie:

const btn = document.querySelectorAll('.class');

Answer 5

To dlatego, że btn przechowuje zbiór elementów, a nie jeden konkretny.

Możesz użyć:
 

var btni = btn.length

while(btni <= 0){
//Twój kod
btni--;
}

Powinno zadziałać. Niedawno miałem podobny problem i zadziałało.

Comments

co to niby robi?

---

Pętla, która może wczytywać po kolei wszystkie wartości tych komórek, za pomocą btn[btni]

P.S

W tym przypadku będzie się to działo od tyłu ale bardzo łatwo to naprawić

Edit: To jest właśnie zarys pętli o której wspominasz powyżej

---

Twój kod nie zadziała, bo w JS-ie nie ma pętli While, jest pętla while. 

---

Prawda, autokorektę mam ustawioną na duże litery od nowej linii, nie zauważyłem błędu