Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][JavaScript]Case'y w JS w zależności od wartości w bazie
sadistic_son
post 3.01.2023, 12:18:45
Post #1





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

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

Cześć.

W JS raczkuję. Mam taki skrypcik poniżej:
[JAVASCRIPT] pobierz, plaintext 
  1. const dvdFields = document.getElementById('dvdFields');
  2. const bookFields = document.getElementById('bookFields');
  3. const furnitureFields = document.getElementById('furnitureFields');
  4. const selector = document.getElementById('productType');
  5.  
  6.  
  7. selector.addEventListener("click", () => {
  8.     selector.addEventListener("change", () => {
  9.         switch (selector.value) {
  10.             case "DVD":
  11.                 dvdFields.style.display = 'block';
  12.                 bookFields.style.display = 'none';
  13.                 furnitureFields.style.display = 'none';
  14.                 break;
  15.             case "Book":
  16.                 bookFields.style.display = 'block';
  17.                 dvdFields.style.display = 'none';
  18.                 furnitureFields.style.display = 'none';
  19.                 break;
  20.             case "Furniture":
  21.                 furnitureFields.style.display = 'block';
  22.                 dvdFields.style.display = 'none';
  23.                 bookFields.style.display = 'none';
  24.                 break;
  25.             default:
  26.                 furnitureFields.style.display = 'none';
  27.                 dvdFields.style.display = 'none';
  28.                 bookFields.style.display = 'none';
  29.  
  30.         }
  31.     });
  32. });
[JAVASCRIPT] pobierz, plaintext


Skrypt wyswietla lub chowa diy w zalezności od tego co mamy wybrane w SELECT. Żadne rocket science. Ale teraz wypadałoby aby wartości book, dvd, furniture nie były wpisane ręcznie, ale żeby ładowały się z bazy. Obecnie w bazie mam 3 rodzaje produktów, ale jak będzie ich 300... ?
Tak więc, jeśli rodzajów produktów będzie więcej to i case'ów powinno być automatycznie więcej. Jesli dodam do bazy rodzaj produktu 'sanki' no to powinien się dodać nowy case gdzie 'sankiFields' jest display:block a reszta ma 'none'.
Oczywiście wiem jak to zrobić w php, ale wrzucanie phpa do pliku js, lub trzymanie skryptu js w pliku *.php to chyba nie jest najlepsza praktyka. Pomóżcie jak to zrobić po bożemu.
Dzięki.

Ten post edytował sadistic_son 3.01.2023, 12:20:07


--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
nospor
post 3.01.2023, 12:27:07
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Generalnei sie zle za to zabrales. Nie tworzy sie dynamicznego switch...case tylko tworzy sie tablice/obiekt z informacjami co dany typ zawiera. I potem napodstawie tej tablicy sobie wyswietlasz/chowasz co tam chcesz.
I tak, taka tablice js buduje sie w php (czy tam systemie szablonow zalezy co masz) i w klada sie normalnie w kod strony html.

I kolejna rzecz, to nie robi sie milion HIDEow tylko swoim elementom nadajesz jakas klase np class="dynamic-elements" i potem chowasz wssystkie elementy z ta klasa i pokazujesz tylko te dla wybranego selecta i juz. Znacznie mniej kodu i dziala zawsze

No i na koniec:
selector.addEventListener("click", () => {
selector.addEventListener("change", () => {
co to jest?? w clicku dodajesz event change? Po grzyba? Czemu poprostu nie zdefiniiujesz tego even change i juz. Pomijajac bezsens obecnej logiki, to na dodatek za kazdym razem jak klikasz w element to tworzysz kolejny event change i ostattecznie skonczysz z tysiacem eventow na stronie wink.gif


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

"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
sadistic_son
post 3.01.2023, 12:37:05
Post #3





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

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

Cytat(nospor @ 3.01.2023, 12:27:07 ) *
(...) I tak, taka tablice js buduje sie w php (czy tam systemie szablonow zalezy co masz) i w klada sie normalnie w kod strony html.

ok, ale czy wrzucanie JS w html, zamiast w <head><script scr"skrypt.js" ... to nie jest zła praktyka? Normalnie miałbym to gdzieś, ale przy moim obecnym zadaniu best-practices są ważne.


Cytat(nospor @ 3.01.2023, 12:27:07 ) *
I kolejna rzecz, to nie robi sie milion HIDEow tylko swoim elementom nadajesz jakas klase np class="dynamic-elements" i potem chowasz wssystkie elementy z ta klasa i pokazujesz tylko te dla wybranego selecta i juz. Znacznie mniej kodu i dziala zawsze

Dobra, czyli zamist id="dvdFields", id="bookFields" wszystkim im nadaję class="dynamicFields" oraz display:none, a potem tylko temu który mam wybrany w select nadaję display:block. Dobrze rozumiem? W takim razie jak odróżnię te wszystkie co mają być niewidoczne od tego jednego co jest wybrany w select?



Cytat(nospor @ 3.01.2023, 12:27:07 ) *
selector.addEventListener("click", () => {
selector.addEventListener("change", () => {
co to jest?? w clicku dodajesz event change? Po grzyba? Czemu poprostu nie zdefiniiujesz tego even change i juz. Pomijajac bezsens obecnej logiki, to na dodatek za kazdym razem jak klikasz w element to tworzysz kolejny event change i ostattecznie skonczysz z tysiacem eventow na stronie wink.gif

Ok, zrezygnowałem z tego, zostawiłem tylko change. Click było mi potrzebne po to, że pierwotnie chciałem aby przy pierwszym kilknięciu w select już wybierało mi wartość domyślną, ale ostatecznie dodałem dodatkowy option z wartością 'please choose' i jest gituś.


--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
nospor
post 3.01.2023, 12:44:05
Post #4





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Cytat
ok, ale czy wrzucanie JS w html, zamiast w <head><script scr"skrypt.js" ... to nie jest zła praktyka? Normalnie miałbym to gdzieś, ale przy moim obecnym zadaniu best-practices są ważne.

JA ci nie karze trzymac calego kodu js w pliku html. Ja ci tylko mowie, bys to co jest dynamiczne tylko wrzucil do html. Tak sie wlasnie robi.

Cytat
Dobra, czyli zamist id="dvdFields", id="bookFields" wszystkim im nadaję class="dynamicFields" oraz display:none, a potem tylko temu który mam wybrany w select nadaję display:block. Dobrze rozumiem? W takim razie jak odróżnię te wszystkie co mają być niewidoczne od tego jednego co jest wybrany w select?

Id mozesz zostawic bo po ID bedziesz przeciez pokazywal wybrane pola. Klasa sluzy glownie do chowania wssytkiego naraz. Oczywiscie chowasz za kazdym razem gdy w select wybor sie zmieni.

Cytat
W takim razie jak odróżnię te wszystkie co mają być niewidoczne od tego jednego co jest wybrany w select?

Noto mowie przeciez: chowasz zawsze wszystko co ma te klase, a pokazujesz tylko ten jeden co masz wybrany (po id)


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

"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
sadistic_son
post 3.01.2023, 13:43:45
Post #5





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

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

No dobra, rozumiem co masz na mysli.

A więc tak wygląda fragmencik źródła strony:
[HTML] pobierz, plaintext 
  1. <select id="productType" name="productType">
  2.   <option value="Book">Book</option>
  3.   <option value="DVD">DVD</option>
  4.   <option value="Furniture">Furniture</option>
  5. </select>
  6.  
  7.  
  8. <div class="dynamicFields" id="Book">
  9.                             <label>
  10.                                 Weight (kg)<input type="text" name="weight" id="weight" />
  11.                             </label><br />
  12.                             <div class="productPropertyDescription">Please provide the weight of book in kg.</div>
  13. </div>
  14.  
  15. <div class="dynamicFields" id="DVD">
  16.                             <label>
  17.                                 Size (MB)<input type="text" name="size" id="size" />
  18.                             </label><br />
  19.                             <div class="productPropertyDescription">Please provide size of DVD in MB.</div>
  20. </div>
[HTML] pobierz, plaintext

elementy 'dynamicFields' mają w css ustawione 'display:none' domyslnie, bo chcemy je wyświetlić tylko jeśli są wybrane w selekcie (zdeterminujemy to po ich ID).

Do tego taki skrypcik:
[JAVASCRIPT] pobierz, plaintext 
  1. const selector = document.getElementById('productType');
  2. const visible = document.getElementById(selector.value);
  3. const dynamicFields = document.getElementsByClassName('dynamicFields');
  4.  
  5. console.log(selector);
  6. console.log(visible);
  7.  
  8. selector.addEventListener("change", () => {
  9.     visible.style.display = 'block';
  10.     dynamicFields.style.display = 'none';
  11. })
[JAVASCRIPT] pobierz, plaintext

Niestety w konsoli JS dostaję:
Kod
Uncaught TypeError: Cannot read properties of null (reading 'style')
    at HTMLSelectElement.<anonymous> (scripts.js:7:13)
Czemu nie widzi tego elementu?

Ten post edytował sadistic_son 3.01.2023, 13:53:09


--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
nospor
post 3.01.2023, 14:05:37
Post #6





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Jesli zrobisz
console.log(dynamicFields);
a mocno mnie rozczarowales ze jeszcze nei zrobiles,tongue.gif
to zobaczysz ze to jest teraz tablica (ewentualnie NULL) a nie jeden element wiec nie mozesz zrobic
dynamicFields.style.display = 'none';


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

"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
sadistic_son
post 3.01.2023, 14:07:46
Post #7





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

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

Mam tych console logów tutaj pełno, z value, bez value, z dupami i bez biggrin.gif No ale takich rzeczy przecież się na forum nie wkleja. No dobra - nie wiedziałem, że nie można masowo zmienić stylu dla wielu elementów. Zaraz... mozna. Nie można dla tablicy. No dobra, skoro nie dynamicFields.style.display = 'none'; to co? sad.gif Pętlą mam to jechać ?

Ten post edytował sadistic_son 3.01.2023, 14:08:34


--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
nospor
post 3.01.2023, 14:09:11
Post #8





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
skoro dynamicFields to tablica to lecisz po tablicy przy uzycui chocby FOR i zmieniasz style display dla kazdego elementtu tablicy. Tylko sie upewnij ze to tablica bo komunikat bledu jakby mowil ze to null?


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

"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
sadistic_son
post 3.01.2023, 14:12:58
Post #9





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

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

Ok, zaraz polecę pętlą, ale tymczasem dlaczego nawet w obecnej formie, po zmianie selecta na dowolną wartość cały czas jedynie wyświetla element o ID takim jak pierwsza wartość z option?
[JAVASCRIPT] pobierz, plaintext 
  1. let selector = document.getElementById('productType');
  2. let visible = document.getElementById(selector.value);
  3. let dynamicFields = document.getElementsByClassName('dynamicFields');
  4.  
  5. console.log(selector);
  6. console.log(selector.value);
  7. console.log(visible);
  8. console.log(dynamicFields);
  9.  
  10. selector.addEventListener("change", () => {
  11.     // dynamicFields.style.display = 'none';
  12.     visible.style.display = 'block';
  13. })
[JAVASCRIPT] pobierz, plaintext

Tak jak by change zadziałał tylko jeden raz na początku.



EDIT:
oraz pętelka:
[JAVASCRIPT] pobierz, plaintext 
  1. let selector = document.getElementById('productType');
  2. let visible = document.getElementById(selector.value);
  3. let dynamicFields = document.getElementsByClassName('dynamicFields');
  4.  
  5. console.log(selector);
  6. console.log(selector.value);
  7. console.log(visible);
  8. console.log(dynamicFields);
  9.  
  10. selector.addEventListener("change", () => {
  11.     for (var i = 0; i < dynamicFields.length; i++) {
  12.         let c = dynamicFields[i];
  13.         c.style.display = 'none';
  14.  
  15.     }
  16.  
  17.     visible.style.display = 'block';
  18. })
[JAVASCRIPT] pobierz, plaintext
Nic to niestety nie zmieniło sad.gif

Ten post edytował sadistic_son 3.01.2023, 14:18:38


--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
nospor
post 3.01.2023, 14:19:25
Post #10





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
No przeciez visible masz ustawic w change() a nie kilometr wczesniej


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

"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
sadistic_son
post 3.01.2023, 14:25:10
Post #11





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

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

Cytat(nospor @ 3.01.2023, 14:19:25 ) *
No przeciez visible masz ustawic w change() a nie kilometr wczesniej

Aaaaaa, no taaak biggrin.gif
Działa dzięki biggrin.gif



--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 11:41
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn