[PHP][JavaScript]Case'y w JS w zależności od wartości w bazie Opcje

[sadistic_son]

Cześć.

W JS raczkuję. Mam taki skrypcik poniżej:

[JAVASCRIPT] pobierz, plaintext 
const dvdFields = document.getElementById('dvdFields');
const bookFields = document.getElementById('bookFields');
const furnitureFields = document.getElementById('furnitureFields');
const selector = document.getElementById('productType');
 
 
selector.addEventListener("click", () => {
    selector.addEventListener("change", () => {
        switch (selector.value) {
            case "DVD":
                dvdFields.style.display = 'block';
                bookFields.style.display = 'none';
                furnitureFields.style.display = 'none';
                break;
            case "Book":
                bookFields.style.display = 'block';
                dvdFields.style.display = 'none';
                furnitureFields.style.display = 'none';
                break;
            case "Furniture":
                furnitureFields.style.display = 'block';
                dvdFields.style.display = 'none';
                bookFields.style.display = 'none';
                break;
            default:
                furnitureFields.style.display = 'none';
                dvdFields.style.display = 'none';
                bookFields.style.display = 'none';
 
        }
    });
});
[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

[sadistic_son]

No dobra, rozumiem co masz na mysli.

A więc tak wygląda fragmencik źródła strony:

[HTML] pobierz, plaintext 
<select id="productType" name="productType">
  <option value="Book">Book</option>
  <option value="DVD">DVD</option>
  <option value="Furniture">Furniture</option>
</select>
 
 
<div class="dynamicFields" id="Book">
                            <label>
                                Weight (kg)<input type="text" name="weight" id="weight" />
                            </label><br />
                            <div class="productPropertyDescription">Please provide the weight of book in kg.</div>
</div>
 
<div class="dynamicFields" id="DVD">
                            <label>
                                Size (MB)<input type="text" name="size" id="size" />
                            </label><br />
                            <div class="productPropertyDescription">Please provide size of DVD in MB.</div>
</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 
const selector = document.getElementById('productType');
const visible = document.getElementById(selector.value);
const dynamicFields = document.getElementsByClassName('dynamicFields');
 
console.log(selector);
console.log(visible);
 
selector.addEventListener("change", () => {
    visible.style.display = 'block';
    dynamicFields.style.display = 'none';
})
[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