Frage zum Wiki-Artikel „JavaScript“

[Chris]

Hallo,

ich habe folgendes Problem, für welches ich eine Lösung suche:

Es gibt ein Eingabefeld(Zahl) "A" und eine Eingabefeld "B". Feld B soll ausgebelendet sein, ausser, im Feld A wird ein Wert >=5000 eingegeben. Dann erst soll das Eingabefeld "B" eingebelendet werden.

Wäre super, wenn ich hier eine Lösung finden könnte!

Beste Grüße Chris

[Matthias Scharwies]

Servus!

Hallo,

ich habe folgendes Problem, für welches ich eine Lösung suche:

Es gibt ein Eingabefeld(Zahl) "A" und eine Eingabefeld "B". Feld B soll ausgebelendet sein, ausser, im Feld A wird ein Wert >=5000 eingegeben. Dann erst soll das Eingabefeld "B" eingebelendet werden.

Wäre super, wenn ich hier eine Lösung finden könnte!

Evtl sowas:

Durchschnittsrechner

Müsstest du dir noch anpassen.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Servus!

Hallo,

ich habe folgendes Problem, für welches ich eine Lösung suche:

Es gibt ein Eingabefeld(Zahl) "A" und eine Eingabefeld "B". Feld B soll ausgebelendet sein, ausser, im Feld A wird ein Wert >=5000 eingegeben. Dann erst soll das Eingabefeld "B" eingebelendet werden.

Wäre super, wenn ich hier eine Lösung finden könnte!

Evtl sowas:

Durchschnittsrechner

Müsstest du dir noch anpassen.

Das war evtl. etwas zu viel für den Anfang. Was hast du denn schon?

In unserem Wiki findest du links einen Link auf Wie fange ich an?

Dort findest du unsere Kurse

• Einstieg in JavaScript
• Einstieg in DOM und Events

---

Mach Dir erst einmal einen (Programmablauf)-Plan.

Du brauchst eine Webseite mit zwei Eingabe-Elementen, die jeweils eine id haben. (Über die id kannst du sie mit JS ansprechen)

Das zweite Eingabe-Element willst du ausblenden. Dafür brauchst du CSS:

<style>
.ausgeblendet {
  display: none;
}
</style>


<input type="number" id="input2" class="ausgeblendet">

Jetzt kommt das JavaScript:

Mit einer Eingabe rufst du ein Programm / eine Funktion auf, die überprüft

1. ob die Eingabe eine Zahl ist
2. ob die Eingabe über 5000 liegt.

Falls (engl. if) die Bedingung zutrifft, führst du eine Anweisung aus, die mit classList.toggle die Klasse des zweiten Eingabeelements umschaltet.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

dazu noch ein paar Anmerkungen.

• Prüfen, ob die Eingabe eine Zahl ist. Wenn man die valueAsNumber Eigenschaft eines input type="number"-Elements verwendet, bekommt man definitiv eine Zahl - oder NaN, wenn nichts drinsteht.
• Ob ein Wert NaN ist, prüft man mit der Funktion isNaN
• Das alleinige Ausblenden des input-Elements reicht nicht, weil das verpflichtend vorhandene Label dann einsam stehenbleibt. Entweder legt man das input-Element ins Label und blendet das Label aus, oder man legt ein div um beide herum ind blendet das div aus.
• Je nach Seitenlayout kann ein display:none disruptiv sein, weil sich durch das Ein- und Ausblenden Layoutverschiebungen ergeben. Die Verwendung der CSS-Eigenschaft visibility:hidden statt display:none könnte abhelfen. Aber wie gesagt: das hängt vom Seitenlayout ab.

Und weil wir Blue Beanie Advent haben:

• Das Einblenden des zweiten Eingabefeldes, bzw. die Abhängigkeit von Eingabefeld 1 und Eingabefeld 2, müsste wohl einer Assistenztechnik bekannt gemacht werden.
• Wenn man das input-Event verwendet, so wie Du im Mittelwertrechner, erscheint das zweite Feld während der Eingabe. Das ist gut für Leute, die auf den Bildschirm gucken können und erleichtert den Fokuswechsel ins neue Feld, aber ich weiß nicht, was eine Assistenztechnik damit macht. Quatscht sie im Moment, wo ich über 5000 komme, dazwischen und verkündet das neue Eingabefeld? Stört das?
• Verwendet man das change-Event, wird das zweite Feld erst beim Verlassen des ersten Feldes aktiv. Für Mausschubser und Screentoucher lästig, weil sie nicht hineinklicken können, für Tastenakrobaten verwirrend, weil der Cursor nicht hineinwechselt (sofern Feld 2 direkt hinter Feld 1 steht). Für Screenreader vermutlich besser, weil der Reader nicht in die Eingabe hineinquatscht.
• Ist unter dem Gesichtspunkt "Bedienbarkeit" ein Formular, das sich je nach Feldinhalten dynamisch umbaut, überhaupt wünschenswert? Oder müsste man davon abraten?

Was sagen unsere A11y-Experten dazu? Ich bin keiner.

Rolf

[Der Martin]

Hallo Rolf,

• Ist unter dem Gesichtspunkt "Bedienbarkeit" ein Formular, das sich je nach Feldinhalten dynamisch umbaut, überhaupt wünschenswert? Oder müsste man davon abraten?

ich würde davon abraten, weil das für den Nutzer unerwartet und überraschend ist. Stattdessen würde ich das zusätzliche Feld nicht ausblenden, sondern nur deaktivieren (readonly-Attribut, ggf. visuell etwas nchhelfen, etwa mit opacity oder so). Dann sieht man von Anfang an, dass es eine weitere Einhabemöglichkeit gibt, deren Verfügbarkeit aber anscheinend kontextabhängig ist. Und das Layout bleibt auch stabil.

Das gilt übrigens nicht nur für Web-Formulare, sondern auch für Eingabemasken in nativen Anwendungen.

Was sagen unsere A11y-Experten dazu? Ich bin keiner.

Ich auch nicht; ich gebe nur meine Meinung zum Besten.

May the Schwartz be with you
 Martin

[klawischnigg]

Hi there,

Was sagen unsere A11y-Experten dazu? Ich bin keiner.

Ich auch nicht, aber ich denke mir, spätestens nach Deinem Posting überlegt sich der Originalposter, ob es nicht doch gescheiter wäre, eine Tischlerlehre zu beginnen...😉

[Rolf B]

Hallo klawischnigg,

gescheiter wäre, eine Tischlerlehre zu beginnen

Das wäre für viele Leute, die das Web mit Seiten beflecken, eine gescheitere Idee.

Ob es für Chris zutrifft, kann ich nicht sagen. Er muss sich ja erstmal äußern.

Rolf

[Rolf B]

Hallo Chris,

welche Lehranstalt sucht übrigens eine Lösung für dieses Problem?

Rolf