Wybieranie elementow

Odpowiedz Nowy wątek
2019-09-03 13:17
0
<!DOCTYPE html>
<html>
      <head>
          <script>
          function add_post (contents){
               const post = document.createElement('div');  
               post.id = contents;             
                post.className = 'post';
                post.innerHTML = contents;
                post.id = contents;
                const remove = document.createElement('button');
                remove.className = 'remove';
                remove.innerHTML = 'Remove';
                post.append(remove);
                document.querySelector('#posts').append(post);
                };

         document.addEventListener('DOMContentLoaded', () => {

            document.querySelector('#send').onclick = () => {
            contents = document.querySelector('#message').value;
           add_post(contents);
           };           

            document.querySelectorAll('#posts').forEach((element) => {
            element.onclick = () => {
                document.querySelector('#info').innerHTML = element.id;
                document.querySelector('#info1').innerHTML = element.innerHTML;
             };            
            });

             document.querySelectorAll('.post').forEach((element) => {
            //element.onclick = () => {
                document.querySelector('#info2').innerHTML = element.className;
             //};            
            });

             });

          </script>

      </head>
     <body> 
         <h2 id="info">info</h2>
         <h2 id="info1">info1</h2>
         <h2 id="info2">info1</h2>

        <input id="message" autocomplete="off" placeholder="Say something" type="text">
        <button id="send">send</button>

        <div id="posts">
        </div>   

    </body>
</html>

Witam

Dlaczego document.querySelector('#info').innerHTML = element.id; wyświetla 'posts' a nie to co zostało wpisane?
(id diva a nie posta którego kliknąłem)

A w drugim przypadku document.querySelectorAll('.post').forEach((element) => { gdy zaznaczam klasę dlaczego nic się nie dzieje ?

Dzięki

edytowany 1x, ostatnio: cerrato, 2019-09-03 14:05

Pozostało 580 znaków

2019-09-03 14:56
0

Sądzę iż to dla tego że document.addEventListener('DOMContentLoaded', () ={...} wykonało się zanim dodałeś divy postów. Więc wyświetla id istniejącego elementu i jego wnętrze - którego nie zmapował pod zdarzenia. Przyjrzyj się - w info wrzuca ci zawartość całego id:posts a nie treść poszczególnych postów. Tak mi się zdaje :P

Pozostało 580 znaków

2019-09-03 16:42
0

Przyjrzyj się - w info wrzuca ci zawartość całego id:posts a nie treść poszczególnych postów.>

ja dobrze o tym wiem pisałem o tym w poście

(id diva a nie posta którego kliknąłem) >

Według mnie document.addEventListener('DOMContentLoaded', () ={...} nie mogło się wcześniej wykonać bo to jest funkcja nasłuchująca zmian w dokumencie dlatego mogę dodać post po kliknieciu przycisku send document.querySelector('#send').onclick (wywołuje on funkcję add_post) - i to działa.

Następnie wybieram wszystkie elementy z diva (posts) i jeżeli któryś przycisk z tego elementu zostanie kliknięty to ma mi wyświetlić id tego elementu

document.querySelectorAll('#posts').forEach((element) => {
  element.onclick = () => {
    document.querySelector('#info').innerHTML = element.id;
    document.querySelector('#info1').innerHTML = element.innerHTML;
  };            
});

ale tak się nie dzieje wyświetla jakby id elementu nadrzędnego i to mnie dziwi bo element w tym przypadku to powinien być
pojedynczy post bo jest niby przeiterowane pętlą .forEach.
Ktoś wie jak się do tego dobrać?

edytowany 2x, ostatnio: cerrato, 2019-09-03 16:48

Pozostało 580 znaków

2019-09-03 19:34
1

Nie całkiem łapię, to co opisujesz, ale:

Według mnie document.addEventListener('DOMContentLoaded', () ={...} (...)
to jest funkcja nasłuchująca zmian w dokumencie

Nie.

DOMContentLoaded oznacza: wywołaj funkcję po załadowaniu drzewa DOM. Jego późniejsze modyfikacje nie będą już brane pod uwagę.

document.addEventListener jest poleceniem dodania elementom "słuchaczy" określonych akcji.

Czyli po załadowaniu DOM dokumentu twoja funkcja wywoływana jest RAZ i przypisuje istniejącym po załadowaniu elementom określone akcje.


edytowany 1x, ostatnio: Freja Draco, 2019-09-03 19:35
Czyli wyszło na moje :) - titako 2019-09-04 07:03

Pozostało 580 znaków

2019-09-03 19:56
1

Poza tym:
document.querySelectorAll('#posts') jest bez sensu. ID elementu z założenia ma być niepowtarzalne.

Poza tym ID-y divów tworzone są z nazw podanych przez użytkownika, więc mogą się powtarzać albo nawet ingerować w strukturę kodu HTML dodaj sobie np post o nazwie: abc">.


Pozostało 580 znaków

2019-09-03 20:04
1

Następnie wybieram wszystkie elementy z diva (posts)
document.querySelectorAll('#posts').forEach((element) => {

Nie.
Ten selektor łapie ci wszystkie elementy o identyfikatorze "posts" (chociaż, jak już pisałam, takie używanie go jest nieco bez sensu).
Jak chcesz łapać wszystkie DIV-y będące jego dziećmi, to zamiast #posts użyj #posts>DIV.

I ogólnie więcej w tym skrypcie nie działa niż działa, więc ciężko poprawiać.


edytowany 1x, ostatnio: Freja Draco, 2019-09-03 20:05

Pozostało 580 znaków

2019-09-04 12:03
0

tak titako jestes wielki

@Freja Draco

Metoda addEventListener pozwala zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie.
listener
Obiekt, który otrzymuje zawiadomienie, gdy nastąpi zdarzenie określonego typu. Musi być zaimplementowanym obiektem interfejsu EventListener lub pojedynczą funkcją JavaScript.>
nie wiem czego tu nie czaisz

ja Ciebie o analizę kodu nie prosiłem ale skoro pytasz to odpowiem
id nie jest bez sensu bo w poscie ma być znacznik czasu z sekundami więc id będzie unikalne co do ingerencję w kod to z całą pewnością są funkcje typu sanitize ale ja ich nie muszę znać ani używać.

Ja muszę wydobyć z tego treść wiadomości żeby usunąć ją na serwerze i załadować ponownie wiadomości bo tak będzie najprościej a teraz zaznacza się treść i jeszcze do tego przycisk a czy to będzie id czy nie to nie ma żadnego znaczenia
Jeżeli Tobie o to chodziło document.querySelectorAll('#posts>DIV').forEach((element) => {to nie działa

edytowany 2x, ostatnio: cerrato, 2019-09-04 12:06

Pozostało 580 znaków

2019-09-04 14:19
3

Nie mam pojęcia kogo tu cytujesz pod moim nickiem i prawie nic nie rozumiem z tego, co tu piszesz.

document.querySelectorAll('#posts>DIV').forEach((element) użyte w twojej obecnej funkcji będzie działać (co już zostało wyjaśnione) tylko dla elementów istniejących przy uruchomieniu strony czyli w obecnej sytuacji żadnych. A jeśli chcesz przypisywać listenery nowo tworzonym elementom, musisz to robić podczas ich tworzenia.

Sugeruję zacząć wszystko od nowa i użyć tym razem czytelniejszych nazw zmiennych i elementów.

ja Ciebie o analizę kodu nie prosiłem

A to my przepraszamy :>


edytowany 1x, ostatnio: Freja Draco, 2019-09-04 14:21
A jeśli chcesz przypisywać listenery nowo tworzonym elementom, musisz to robić podczas ich tworzenia. - nie musisz, możesz wykorzystać event delegation (zalecane). - Maciej Cąderek 2019-09-05 17:06
Ale to już kolejny poziom abstrakcji, a autor nie wygląda na wysokolevelowca ;) - Freja Draco 2019-09-05 17:10

Pozostało 580 znaków

2019-09-04 14:48
3
wektor10 napisał(a):

ja Ciebie o analizę kodu nie prosiłem ...

... tak mi się skojarzyło:
Nauczycielka pisze w dzienniczku: - Jasio brzydko pachnie, Jasio trzeba myć!
Rodzice odpowiadają: - Jasio nie trzeba wąchać, Jasio trzeba uczyć!


Wykonuję programy na zamówienie, pisać na Priv.
Asm/C/C++/Pascal/Delphi/Java/C#/PHP/JS oraz inne języki.
edytowany 1x, ostatnio: cerrato, 2019-09-04 15:03

Pozostało 580 znaków

2019-09-05 09:06
0

Sugeruję zacząć wszystko od nowa i użyć tym razem czytelniejszych nazw zmiennych i elementów.>

ooo to teraz nazwy zmiennych są złe
tylko że ja to skopiowałem z wykładu, przy najbliższej okazji powiem prowadzącemu że użył złych nazw - ciekawe co mi odpowie xD

Wykładowcy lepiej nie przygadywać, nawet jak się wykłada na wykładzie (no chyba, że orłem jesteś i cię i tak nie ścignie), ale np. nazwy "info" "info1" i "info2" posiadają znikomą wartość informacyjną :> - Freja Draco 2019-09-05 12:24

Pozostało 580 znaków

2019-09-05 10:35

Oooooo - zaczynają się łapania za słówka :P
Z innej beczki - tak jak zaznaczono wyżej twój kod jest troche nie jasny - ale może o coś takiego ci chodziło :

<!DOCTYPE html>
<html  lang="pl">
      <head>
      <meta charset="utf-8" />
        <script>
        function add_post (contents){
               const post = document.createElement('div');  
               post.id = contents;             
                post.className = 'post';
                post.innerHTML = contents;
                post.id = contents;
                const remove = document.createElement('button');
                remove.className = 'remove';
                remove.innerHTML = 'Remove';
                post.append(remove);
                document.querySelector('#posts').append(post);
                var element = document.querySelector('#'+contents);
                 element.addEventListener('click',show_element,false);
                };

        document.addEventListener('DOMContentLoaded', () => {
                document.querySelector('#send').onclick = () => {
                contents = document.querySelector('#message').value;
                add_post(contents);
                };           
            });
        function show_element(){
                        document.querySelector('#info').innerHTML = this.id;
                        document.querySelector('#info1').innerHTML = this.innerHTML;
                        document.querySelector('#info2').innerHTML = this.className;
                }
          </script>

      </head>
     <body> 
         <h2 id="info">info</h2>
         <h2 id="info1">info1</h2>
         <h2 id="info2">info1</h2>

        <input id="message" autocomplete="off" placeholder="Say something" type="text">
        <button id="send">send</button>

        <div id="posts">
        </div>   

    </body>
</html>

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0