Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][JavaScript] insertBefore + forEach
stellatus
post 26.03.2020, 14:55:12
Post #1





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Utworzyłem element "newItem" (<h3>Water</h3>). Chciałbym go wstawić przed każdym bezpośrednim dzieckiem "div.facetwp-facet-tags" z klasą "facetwp-checkbox". Robię więc pętlę forEach, która za pomocą "insertBefore" wkleja ten "newItem" przed każdym "referenceNode", czyli zmiennej "element" w tym przypadku. Czy ten tok myślenia jest dobry? Jeżeli tak, to dlaczego to nie działa? Pojawia się: "TypeError: list.insertBefore is not a function".

https://codepen.io/rudolph-reti/pen/QWbJQJr

Kod
<div class="facetwp-facet-tags">
  <div class="facetwp-checkbox" data-value="arbeit">
    Arbeit <span class="facetwp-counter">(4)</span>
    <span class="facetwp-expand">[+]</span>
  </div>
  <div class="facetwp-depth">
    <div class="facetwp-checkbox" data-value="arbeitsrecht">
      Arbeitsrecht <span class="facetwp-counter">(4)</span>
    </div>
    <div class="facetwp-checkbox" data-value="gastronomie">
      Gastronomie <span class="facetwp-counter">(4)</span>
    </div>
  </div>
  <div class="facetwp-checkbox" data-value="autarkie">
    Autarkie <span class="facetwp-counter">(2)</span>
  </div>
  <div class="facetwp-checkbox" data-value="bach-johann-sebastian">
    Bach, Johann Sebastian <span class="facetwp-counter">(1)</span>
  </div>
  <div class="facetwp-checkbox" data-value="ludwig-van-beethoven">
    Beethoven, Ludwig van <span class="facetwp-counter">(1)</span>
  </div>
  <div class="facetwp-checkbox" data-value="behinderten">
    Behinderten <span class="facetwp-counter">(1)</span>
  </div>
  <div class="facetwp-checkbox" data-value="bioinformatik">
    Bioinformatik <span class="facetwp-counter">(1)</span>
  </div>
  <div class="facetwp-checkbox" data-value="christentum">
    Christentum <span class="facetwp-counter">(4)</span>
    <span class="facetwp-expand">[+]</span>
  </div>
</div>

<script>
  const list = document.querySelectorAll("div.facetwp-facet-tags > div.facetwp-checkbox");
  //console.log(list)

  let newItem = document.createElement("h3");
  let textnode = document.createTextNode("Water");
  newItem.appendChild(textnode);

  //console.log(newItem)

  list.forEach(function(element, index, array) {
    list.insertBefore(newItem, element);
  });
</script>


Ten post edytował stellatus 26.03.2020, 15:35:35
Go to the top of the page
+Quote Post
nospor
post 26.03.2020, 15:13:37
Post #2





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Komunikat bledu chyba dosc jasno nakierowuje....

list to twoja lista nie element. Element masz w paramatrze funkcji
list.forEach(function(element, index, array) {
element.insertBefore(newItem, element);
});

edit: zas w dokumentacji widze ze to maby rodzic na ktorym jest wykonywany insertBefore wiec

tuMaBycRodzic.insertBefore(newItem, element);


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
stellatus
post 26.03.2020, 15:45:59
Post #3





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Dzięki. Błąd zniknął, ale to insertBefore nie działa tak jak oczekiwałem. Nie wkleja "newItem" przed każdym elementem listy, tylko przed tym, na którym zatrzymuje się pętla. Co zrobić, żeby wkleić "newItem" przed każdym elementem listy?

Kod
const list = document.querySelectorAll("div.facetwp-facet-tags > div.facetwp-checkbox");
  //console.log(list)
const parent = document.querySelector("div.facetwp-facet-tags");
//console.log(parent)

  let newItem = document.createElement("h3");
  let textnode = document.createTextNode("Water");
  newItem.appendChild(textnode);

  //console.log(newItem.innerHTML)

  list.forEach(function(element, index, array) {
    parent.insertBefore(newItem, element);
  });


Go to the top of the page
+Quote Post
nospor
post 26.03.2020, 15:48:14
Post #4





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Hehe, to dlatego ze zawsze wkladasz dokladnie ten sam element
newItem
I on wedruje pokolei z listy do listy wink.gif
Albo w petli tworz za kazdym razem nowy element do wlozenia, albo go klonuj


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
stellatus
post 26.03.2020, 16:21:48
Post #5





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Dzięki. A jak to zrobić? Nie mam kompletnie żadnego pomysłu (nawet na to co wpisać do googla).
Go to the top of the page
+Quote Post
nospor
post 26.03.2020, 16:23:23
Post #6





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




no toz napisalem co masz zrobic.... masz za kazdym razem tworzyc nowe element do wlozenia

Kod
  //console.log(newItem.innerHTML)

  list.forEach(function(element, index, array) {
let newItem = document.createElement("h3");
  let textnode = document.createTextNode("Water");
  newItem.appendChild(textnode);

    parent.insertBefore(newItem, element);
  });

I juz


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
stellatus
post 27.03.2020, 10:33:44
Post #7





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Dziękuję Ci, bardzo mi pomogłeś.

Zastanawia mnie jedna rzecz. Nie wiem czy poprawnie formułuję to pytanie: dlaczego gdy w pętli deklarowana jest zmienna nie pojawia się błąd redeklaracji?
Go to the top of the page
+Quote Post
nospor
post 27.03.2020, 10:35:02
Post #8





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Bo ona nie jest deklarowana w petli tylko w funkcji. A to roznica


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
stellatus
post 27.03.2020, 10:44:46
Post #9





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


OK, więc żeby lepiej zrozumieć o co tutaj chodzi, to powinienem przestudiować dobrze temat "zakres zmiennych", zgadza się?
Go to the top of the page
+Quote Post
nospor
post 27.03.2020, 10:53:48
Post #10





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Deklarowana zmienna w funkcji to zmienna lokalna tylko dla tej funkcji.

Ale nawet jakby to nie bylo funkcja tylko petla jak myslales, to i tak to by nie wywolalo bledu. js pozwala na wielokrotne deklarowanie tych samych zmiennych. js nawet pozwala na wielokrotne deklarowanie tych samych funkcji. Ot nowa zmienna/funkcja nadpisze stara. To nie php


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
stellatus
post 27.03.2020, 11:22:57
Post #11





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


OK, ale jak się robi redeklarację poza funkcją to wyskakuje błąd. Dlaczego tak jest?
Go to the top of the page
+Quote Post
nospor
post 27.03.2020, 11:24:10
Post #12





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




To pokaz sytuacje z takim bledem, bo ja nie raz w petli redeklarowalem zmienne i bylo wszystko ok


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
stellatus
post 27.03.2020, 11:37:57
Post #13





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Sorry, nieprecyzyjnie się wyraziłem. Nie chodziło mi redeklarację w pętli. Mam zadeklarowane jakieś zmienne poza funkcjami. Uruchamiam kod w konsoli i wszystko gra. Gdy chcę go uruchomić po raz drugi pojawia się błąd redeklaracji. Jest to wkurzające, bo muszę odświeżać przeglądarkę albo wykomentować zmienne, żeby ponownie uruchomić kod.

Ten post edytował stellatus 27.03.2020, 11:48:34
Go to the top of the page
+Quote Post
nospor
post 27.03.2020, 11:51:21
Post #14





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Przepraszam, nie rozumiem co piszesz.

Zrobilem teraz test:

var ala = 2;
var ala = 4;
alert(ala);

I zadnego bledu tylko alert wyswietla mi 4, czyli tak jak mowilem, ze nastepna deklaracja nadpisuje poprzednia


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
stellatus
post 27.03.2020, 11:57:53
Post #15





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


spróbuj proszę z letami i constami
Go to the top of the page
+Quote Post
nospor
post 27.03.2020, 12:17:28
Post #16





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Skoro uzywasz CONSTow znaczy, ze uzywasz tez es6. No tam sytuacja jest inna. Tak, tam nie mozesz sobie zadeklarowac kilka razy tej samej zmiennej ot tak (nie liczac rzecz jasna petli i funkcji bo one sa traktowane inaczej)


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
stellatus
post 27.03.2020, 12:22:00
Post #17





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


OK. No więc właśnie dlatego m.in. miałem problem z tym skryptem. Myślę, że temat zamknięty. Dziękuję bardzo i pozdrawiam.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 11:44