Wybieranie elementow

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

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

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ć?

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.

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">.

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ć.

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

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 :>

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ć!

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

3

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>
0

Mówiłem titako że jesteś wielki :)
dokładnie o to mi chodziło ****document.querySelector('#info').innerHTML = this.id;
jest wiadomość bez przycisku

Zapytasz się o coś to ci zaczną wiersze recytować że tak wspomnę

2

Zadałeś dwa pytania o to, dlaczego coś się nie dzieje i dostałeś odpowiedź. Jeśli chciałeś otrzymać gotowy kod, trzeba było zamieścić posta w dziale "zlecenia". A wiersz pochwalny to ty teraz powinieneś dla @titako napisać ;)

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