Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Dwa skrypty, jeden !czasem! nie działa.
Forum PHP.pl > Forum > Przedszkole
sadistic_son
10.01.2023, 18:08:45
Cześć.
Mam na stronie dwa skrypty. Jeden wyświetla DIVy z zawartością, w zależności od wyboru w SELECT. Tego ładuję w <head>:
[JAVASCRIPT] pobierz, plaintext 
  1. let selector = document.getElementById('productType');
  2. const dynamicFields = document.getElementsByClassName('dynamicFields');
  3.  
  4. selector.addEventListener("change", () => {
  5.     let visible = document.getElementById(selector.value);
  6.     for (var i = 0; i < dynamicFields.length; i++) {
  7.         let c = dynamicFields[i];
  8.         c.style.display = 'none';
  9.     }
  10.  
  11.  
  12.     visible.style.display = 'block';
  13. })
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  3.     <title>
  4.         <?= $title; ?>
  5.     </title>
  6.     <style type="text/css">
  7.         @import url('pagefiles/styles/main.css');
  8.     </style>
  9.     <script src="pagefiles/js/displayPropertyFields.js" defer async></script>
[HTML] pobierz, plaintext



Drugi natomiast sprawdza, czy wypełniono wszystkie wymagane pola input i jeśli któreś jest puste to wrzuca w DIV wiadomość:
[JAVASCRIPT] pobierz, plaintext 
  1. function validateForm() {
  2.     document.getElementById("alertMessage").innerHTML = "";
  3.     var sku = document.forms["product_form"]["sku"].value;
  4.     var name = document.forms["product_form"]["name"].value;
  5.     var price = document.forms["product_form"]["price"].value;
  6.     var productType = document.forms["product_form"]["productType"].value;
  7.  
  8.     if (sku == "" || name == "" || price == "" || productType == "") {
  9.         let ele = document.getElementById('alertMessage');
  10.         ele.innerHTML += 'Please, submit required data.';
  11.         return false;
  12.     }
  13.     document.getElementById("product_form").submit();
  14. }
[JAVASCRIPT] pobierz, plaintext


Teraz kawałek htmla (zbędne elementy usunąłem):
[HTML] pobierz, plaintext 
  1. <form method="POST" id="product_form" name="product_form" onsubmit="return validateForm()" action="http://xxx.pl/add-product">
  2.             <button type="submit" name="save">Save</button>
  3.         <script src="pagefiles/js/displayErrorMessage.js"></script>
  4.         <div id="alertMessage"></div>
  5. <input type="text" id="sku" name="sku" />
  6. <input type="text" id="name" name="name" />
  7. <input type="text" id="price" name="price" />
  8. <select id="productType" name="productType">
  9.        <option value="" selected="selected"></option>
  10.        <option value="DVD">DVD</option>
  11.        <option value="book">book</option>
  12. </select>
  13.  
  14. Dalej są DIVy które mają się pokazywać jak wybiorę ich ID w SELECT:
  15. <div class="dynamicFields" id="DVD">
  16. <div class="dynamicFields" id="book">
[HTML] pobierz, plaintext
Ten drugi skrypt, jak widać wrzucam bezpośrednio do formularza. Czemu? Sam nie wiem, tak było w przykładzie z netu który przerobiłem pod własną potrzebę.

Ale do rzeczy. Pierwotnie był tylko pierwszy skrypt (wyświetlający DIVy w zależności co było wybrane w SELECT. I wszystko działało bez zarzutu.
Po dodaniu drugiego skryptu (sprawdzenie czy wpisano wartości do pół) pierwszy skrypt CZASAMI nie działa. Nie udało mi się stwierdzić jasno w jakiej sytuacji nie działa. Chyba najczęściej kiedy kliknę pole input text i nic w nie nie wpiszę i wtedy staram się wybrać select (żeby pokazać ukryty DIV).
Czy te skrypty mogą się jakoś między sobą gryźć?
nospor
10.01.2023, 21:18:17
A patrzyles czy konsola przegladarki pokazuje jakis blad w sytuacji gdy nie dziala?
viking
11.01.2023, 07:17:05
Z kodu wynika że w ogóle nie przyjmujesz się faktem czy dom został załadowany.
sadistic_son
11.01.2023, 09:53:52
Cytat(nospor @ 10.01.2023, 21:18:17 ) *
A patrzyles czy konsola przegladarki pokazuje jakis blad w sytuacji gdy nie dziala?

Nie rozumiem tego - dobre 5 minut klikałem dziś w każdej możliwej kombinacji i ani razu się nie wysypało. A nic od wczoraj nie zmieniałem, jeszcze edytora nawet nie włączyłem. No nic, będę monitorować konsolę.


Cytat(viking @ 11.01.2023, 07:17:05 ) *
Z kodu wynika że w ogóle nie przyjmujesz się faktem czy dom został załadowany.

Racja. Ale czy to ma tak na serio jakieś znaczenie tutaj? Na stronie gdzie tych elementów nie ma to w ogóle tych skryptów nie załączam. Ale ok, mogę to zmienić tak:
[JAVASCRIPT] pobierz, plaintext 
  1. let selector = document.getElementById('productType');
  2. const dynamicFields = document.getElementsByClassName('dynamicFields');
  3.  
  4. if (selector && dynamicFields) {
  5.     selector.addEventListener("change", () => {
  6.         let visible = document.getElementById(selector.value);
  7.         for (var i = 0; i < dynamicFields.length; i++) {
  8.             let c = dynamicFields[i];
  9.             c.style.display = 'none';
  10.         }
  11.         visible.style.display = 'block';
  12.     })
  13. }
[JAVASCRIPT] pobierz, plaintext




EDIT: Przed chwilą skrypt wyświetlający DIV na bazie opcji z SELECT trzy razy z rzędu mi w ogóle nie zadziałał, a w konsoli czyściutko sad.gif Nie wiem, może to jakiś błąd przeglądarki. Używam Chrome 108.0.5359.125.
Właśnie zaktualizowałem do 109.0.5414.75 .
nospor
11.01.2023, 10:26:27
Chodzilo o to, ze pobierasz pola, ktore moga jeszczxe nie istniec. Wiec masz swoje skrypty zaczac dopiero gdy DOM sie zaladuje.
By wiedziec czy DOM sie zaladowal sluzy window.load
https://developer.mozilla.org/en-US/docs/We...ndow/load_event
trueblue
11.01.2023, 10:30:20
Cytat(nospor @ 11.01.2023, 10:26:27 ) *
By wiedziec czy DOM sie zaladowal sluzy window.load

Raczej DOMContentLoaded. Load mówi o załadowaniu DOM + wszelkich zasobów.
sadistic_son
11.01.2023, 11:13:10
Ok, zmodyfikowałem to tak i na razie po kilkunastu próbach nie wywalilo:
[JAVASCRIPT] pobierz, plaintext 
  1. function showDynamicFields() {
  2.     let selector = document.getElementById('productType');
  3.     const dynamicFields = document.getElementsByClassName('dynamicFields');
  4.  
  5.     if (selector && dynamicFields) {
  6.         selector.addEventListener("change", () => {
  7.             let visible = document.getElementById(selector.value);
  8.             for (var i = 0; i < dynamicFields.length; i++) {
  9.                 let c = dynamicFields[i];
  10.                 c.style.display = 'none';
  11.             }
  12.             visible.style.display = 'block';
  13.         })
  14.     }
  15. }
  16.  
  17. if (document.readyState === 'loading') {
  18.     document.addEventListener('DOMContentLoaded', showDynamicFields);
  19. } else {
  20.     showDynamicFields();
  21. }
[JAVASCRIPT] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.