Formular mit dynamischen Felder

[lopi02]

Hallo zusammen

Weiss jemand was ich falsch gemacht habe?
Die Idee ist das wenn im Dropdown-Menü etwas ausgewählt wird, das alle Fragen mit der Class des ausgewählten Values angezeigt werden. (Auf CodePen habe ich es mit - Haben Sie Kinder -> Ja -> dann müssten zwei Fragen angezeigt werden.) Mit getElementById geht es ja nicht- eine ID ist ja eindeutig. Hat jemand einen Vorschlag?

LG Loïc

Anhang:

Codepen: https://codepen.io/lopi02-the-selector/pen/BvNKeL?editors=1010

[dedlfix]

Tach!

Weiss jemand was ich falsch gemacht habe?

Eine getElement...-Funktion, bei der der Name Element in der Mehrzahl steht, gibt eine NodeList oder eine HTMLCollection zurück und kein einzelnes Element. Du musst also erstmal ein konkretes Element davon auswählen, wenn du damit arbeiten möchtest.

Hat jemand einen Vorschlag?

Wenn die Konsole schon meldet, dass etwas nicht richtig ist - in dem Fall ein "el.style is undefined" - dann sollte man sich das anzeigen lassen, was da kaputt ist. Beispielsweise mit console.log(el).

dedlfix.

[Rolf B]

Hallo lopi02,

abgesehen von dedlfix-Hinweis noch dies:

• eine ID sollte mit einem Buchstaben beginnen. Dann kannst Du sie im CSS Selektor leichter ansprechen.

• Du brauchst Die options von select nicht mit queryselectorall zu suchen. Das select Element (was Du mit e.target bereits verfügbar hast) hat ein options Atttribut. Darüber kannst Du auch iterieren.

• in deiner Schleife musst Du die selected-Eigenschaft des option-Elements, das Du gerade betrachtest, prüfen. Ist sie true, müssen die entsprechenden Elemente sichtbar werden, ist sie false, musst Du sie wieder unsichtbar machen. Du tust Dich hier einfacher, wenn Du nicht display:none verwendest sondern das hidden-Attribut. Das ist schon bool, und Du musst ihm einfach nur !option.selected zuweisen. Hidden wird ordentlich unterstützt, nur IE10 User müssen draußen bleiben.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hidden wird ordentlich unterstützt, nur IE10 User müssen draußen bleiben.

Falsch.

Wenn hidden nicht unterstützt wird, bleibt niemand draußen.

LLAP 🖖

[beatovich]

hallo

• eine ID sollte mit einem Buchstaben beginnen. Dann kannst Du sie im CSS Selektor leichter ansprechen.

[id="allmostanything"]

[MudGuard]

Hi,

• eine ID sollte mit einem Buchstaben beginnen. Dann kannst Du sie im CSS Selektor leichter ansprechen.

[id="allmostanything"]

ist aber was anderes als #allmostanything (von der Specificity her)

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@lopi02

Weiss jemand was ich falsch gemacht habe?

Du stellst zuviele Fragen.

Ich meine nicht hier, sondern dort: Anstatt zu fragen „Haben Sie Kinder?“ und wenn ja, zu fragen wieviele, kannst du gleich nach der Anzahl fragen und wenn diese größer als 0 ist, weitere Fragen einblenden.

Diese solltest du nicht mit style="display: none" verbergen; dafür wäre das hidden-Attribut da.

Aber nicht im HTML setzen, denn die Felder sollten ja angezeigt werden, wenn JavaScript nicht ausgeführt wird.

Also ausblenden mit JavaScript, wenn das Feld Anzahl der Kinder keinen oder den Wert 0 hat. Dafür fallen mir drei Möglichkeiten ein:

• Du gehst alle Elemente der Klasse ‘1.1’ (die darf auch gerne einen sprechenden Namen bekommen) durch und setzt deren hidden-Eigenschaft auf true.

• Du gruppierst die ein-/auszublendenden Felder in einem div und setzt dessen hidden-Eigenschaft auf true. (Spart die Schleife über alle Elemente der Klasse ‘1.1’.)

• Du speicherst die Informationen „JavaScript wird ausgeführt“ und „Kinder da“ an einem übergeorneten Element (das form-Element bietet sich an) in einer Klasse oder einem data-Attribut und blendest die Felder per Nachfahrenselektor ein/aus:

  bspw. form.js-enabled:not(.children-in-da-house) .\31\.1 { display: none }

  An dem Selektor siehst du, dass der Klassenbezeichner ‘1.1’ keine so gute Idee ist. (Der Selektor ist übrigens richtig. Der Syntax-Highlighter ist kaputt.)

Und was noch falsch ist: die <br>-Elemente. Verwende CSS, um Elemente als Blockelemente anzuzeigen. Oder Markup; <p> bietet sich an.

LLAP 🖖

[lopi02]

Herzlichen Dank für eure Antworten! Ich werde das mal ausprobieren 😉 und melde mich dann wieder