Frage zum Wiki-Artikel „Ergebnisausgabe“

[Felix Riesterer]

Liebe Mitlesende,

heute wollte ich etwas über Eingabefelder mit Range (input[type=range]) wissen. Dort gibt es ein Beispiel mit einem Schieberegler, neben dem man live den aktuell eingestellten Wert ablesen kann. Das erfordert sowohl das output-Element, als auch JavaScript. Lässt man den Eventhandler im oninput-Attribut des form-Elements weg, sieht man keine unmittelbaren Änderungen mehr im Beispiel, da der Inhalt des output-Elements nicht mehr aktualisiert wird.

Mir stellen sich da zwei Fragen, die ich nicht ohne Klärung hier im Forum eigenmächtig im Wiki einpflegen will:

1. Sollte man das output-Element nicht per JavaScript ins Dokument schreiben (inklusive Eventhandler), da es ohne JavaScript nicht mehr die gewünschte Funktionalität bietet (außer der Anzeige des initialen Werts natürlich)?
2. Dass man einfach window.ID_eines_Elements notieren kann, war ursprünglich einmal eine Eigenheit des Internet-Explorers, die anscheinend mittlerweile in allen Browsern verlässlich anzutreffen ist (ich habe das nicht geprüft und stelle implizit die Frage hierzu in den Raum). Kann und sollte man das heute einfach voraussetzen, oder gehörte in das Beispiel wenigstens noch der Hinweis, dass man mit document.getElementById() das fragliche input-Element zwar inzwischen umständlicher, aber ebenso zuverlässig ansprechen könnte? Und wenn man dann schon bei Hinweisen ist, sollte man dann die Problematik meines ersten Punktes (output per JS ins Dokument schreiben und Eventhandler dynamisch eintragen) nicht auch gleich mit aufnehmen?

Oder gibt es mittlerweile einen Paradigmenwechsel im Wiki, der die Nichtverfügbarkeit von JS als seltene Ausnahme mit silent fail als Folge bedingt?

Liebe Grüße,

Felix Riesterer.

[Matthias Scharwies]

Servus!

heute wollte ich etwas über Eingabefelder mit Range (input[type=range]) wissen. Dort gibt es ein Beispiel mit einem Schieberegler, neben dem man live den aktuell eingestellten Wert ablesen kann. Das erfordert sowohl das output-Element, als auch JavaScript.

Das output-Element ist m.E neben dem canvas-Element eines der wenigen HTML-Elemente, die JavaScript benötigen, bzw. ohne JavaScript eben keinen output bekommen. (Ausnahme ist diese Fortschrittsanzeige mit css-animation)

Lässt man den Eventhandler im oninput-Attribut des form-Elements weg, sieht man keine unmittelbaren Änderungen mehr im Beispiel, da der Inhalt des output-Elements nicht mehr aktualisiert wird.

Das Bsp. habe ich 2014 so gewählt, damit man sieht, wie sich output dynamisch verändert. Dabei wollte ich, da es ja um den HTML-Bereich geht möglichst wenig JS verwenden. (Ich seh grad, dass die MDN ein ähnliches Bsp. verwendet, habe meins iirc aber aus css-tricks)

Mir stellen sich da zwei Fragen, die ich nicht ohne Klärung hier im Forum eigenmächtig im Wiki einpflegen will:

1. Sollte man das output-Element nicht per JavaScript ins Dokument schreiben (inklusive Eventhandler), da es ohne JavaScript nicht mehr die gewünschte Funktionalität bietet (außer der Anzeige des initialen Werts natürlich)?

Ja, wäre wohl besser, aber ich würde das Bsp. im Wiki so kurz lassen.

Unter ==Siehe auch== ist (jetzt) ein weiteres Bsp. verlinkt.

Ich habe die Seite mal aufgeräumt und einen Hinweis geschrieben.

2. Dass man einfach window.ID_eines_Elements notieren kann, war ursprünglich einmal eine Eigenheit des Internet-Explorers, die anscheinend mittlerweile in allen Browsern verlässlich anzutreffen ist (ich habe das nicht geprüft und stelle implizit die Frage hierzu in den Raum). Kann und sollte man das heute einfach voraussetzen, oder gehörte in das Beispiel wenigstens noch der Hinweis, dass man mit document.getElementById() das fragliche input-Element zwar inzwischen umständlicher, aber ebenso zuverlässig ansprechen könnte? Und wenn man dann schon bei Hinweisen ist, sollte man dann die Problematik meines ersten Punktes (output per JS ins Dokument schreiben und Eventhandler dynamisch eintragen) nicht auch gleich mit aufnehmen?

Nicht im HTML-Bereich, oder?

Oder gibt es mittlerweile einen Paradigmenwechsel im Wiki, der die Nichtverfügbarkeit von JS als seltene Ausnahme mit silent fail als Folge bedingt?

Da hat sich m.E. noch keiner Gedanken gemacht. Habe aber mal einen Artikel (Link finde ich nicht) gelesen, dass in Zeiten, wo Leute selbst in Afrika Smartphones mit Android besitzen, Benutzerfreundlichkeit und Zugänglichkeit nicht mehr „muss ohne JavaScript funktionieren“ sondern „muss seine Funktionalität auch bei schlechter Bandbreite und offline behalten“ bedeuten sollte.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Das output-Element ist m.E neben dem canvas-Element eines der wenigen HTML-Elemente, die JavaScript benötigen, bzw. ohne JavaScript eben keinen output bekommen.

Nö. output kann auch ein Ergebnis auszeichnen, das serverseitig ermittelt wurde; nichts mit JavaScript.

Ich frage mich aber, ob die Anzeige des Eingabewerts wirklich eine Ausgabe darstellt, also ob output dafür überhaupt angebracht wäre.

Die Spec sagt: “The output element represents the result of a calculation performed by the application, or the result of a user action.”

Geht die Anzeige des Werts nach Betätigung des Schiebereglers als result of a user action durch?

Habe aber mal einen Artikel (Link finde ich nicht) gelesen, dass in Zeiten, wo Leute selbst in Afrika Smartphones mit Android besitzen, Benutzerfreundlichkeit und Zugänglichkeit nicht mehr „muss ohne JavaScript funktionieren“ sondern „muss seine Funktionalität auch bei schlechter Bandbreite und offline behalten“ bedeuten sollte.

Was nicht unbedingt was anderes ist. Jeder Nutzer ist ohne JavaScript, solange das JavaScript nicht geladen wurde.

LLAP 🖖

[Matthias Scharwies]

Servus!

Dort gibt es ein Beispiel mit einem Schieberegler, neben dem man live den aktuell eingestellten Wert ablesen kann. Das erfordert sowohl das output-Element, als auch JavaScript. Das output-Element ist m.E neben dem canvas-Element eines der wenigen HTML-Elemente, die JavaScript benötigen, bzw. ohne JavaScript eben keinen output bekommen.

Nö. output kann auch ein Ergebnis auszeichnen, das serverseitig ermittelt wurde; nichts mit JavaScript.

Ja, du hast natürlich recht - hier ging's aber ursprünglich um ein Wiki-Beispiel für output. Ich habe ja mittlerweile auch eins mit css-animation gefunden; aber am anschaulichsten und sinnvollsten ist doch wohl etwas wie der Schieberegler, auch wenn er sehr simpel ist, oder die Berechnung des Body-Mass-Index.

Ich frage mich aber, ob die Anzeige des Eingabewerts wirklich eine Ausgabe darstellt, also ob output dafür überhaupt angebracht wäre.

Das ist m. E. alles ein Kompromiss zwischen einem statischen Beispiel ohne variable Werte und dem von Felix vorgeschlagenen JavaScript mit dynamischer Erzeugung eines output-Elements.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Das ist m. E. alles ein Kompromiss zwischen einem statischen Beispiel ohne variable Werte und dem von Felix vorgeschlagenen JavaScript mit dynamischer Erzeugung eines output-Elements.

Ja, das ist wohl so.

Wäre dies ein anderer und vielleicht besserer Kompromiss?

  <form id="myForm">
    <input type="range" id="a" value="50">
    <output for="a" id="wert">50</output>
    <output for="a" id="quad">2500</output>
    <output for="a" id="kub">125000</output>
  </form>

document.getElementById("myForm").addEventListener("input", rechne);
	
var input = document.getElementById("a"),
    wert  = document.getElementById("wert"),
    quad  = document.getElementById("quad"),
    kub   = document.getElementById("kub");
	
function rechne() {
	wert.value = parseInt(a.value);
	quad.value = Math.pow(wert.value,2);
	kub.value  = Math.pow(wert.value,3);
}

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Wäre dies ein anderer und vielleicht besserer Kompromiss?

Warum soll es ein Schieberegler sein, wenn es um ein Beispiel fürs output-Element geht?

Einfach ein Eingabefeld <input type="number"/> und die Ausgabe einer Berechnung entsprechend der Eingabe.

Oder auch zweier Berechnungen; das kann das Quadrat und der Kubus sein.

Mir wäre noch eingefallen: zwei Eingabefelder für n und k und die Berechnung der Anzahl der Kombinationen und Variationen von k aus n Elementen.

function rechne() {
	wert.value = parseInt(a.value);

input.value meintest du.

	quad.value = Math.pow(wert.value,2);
	kub.value  = Math.pow(wert.value,3);
}

Nicht dass das einen großen Unterschied machen würde, aber warum so teure Math.pow-Operationen?

function rechne()
{
  var a = parseInt(a.value);
  var q = a * a;
  var c = q * a;
  // Ausgabe
}

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Warum soll es ein Schieberegler sein, wenn es um ein Beispiel fürs output-Element geht?

Weil dieses Beispiel auch ein Beispiel für Schieberegler ist. https://wiki.selfhtml.org/wiki/HTML/Formulare/input/number#type_.3D_.22range.22

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Warum soll es ein Schieberegler sein, wenn es um ein Beispiel fürs output-Element geht?

Weil dieses Beispiel auch ein Beispiel für Schieberegler ist. https://wiki.selfhtml.org/wiki/HTML/Formulare/input/number#type_.3D_.22range.22

Warum soll dasselbe Beipiel für <input type="range"> und <output> herhalten?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Warum soll dasselbe Beipiel für <input type="range"> und <output> herhalten?

Warum nicht?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Warum soll dasselbe Beipiel für <input type="range"> und <output> herhalten?

Warum nicht?

Weil das jeweilige Beispiel das betreffende Element in den Fokus rücken sollte. Andere Elemente – andere Beispiele.

Der Schieberegler könnte zur Einstellung der Stärke eines Filters verwendet werden oder drei davon für eine Farbe im HSL-Farbraum.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Der Schieberegler könnte zur Einstellung der Stärke eines Filters verwendet werden oder drei davon für eine Farbe im HSL-Farbraum.

Danke für die Beispiele.

Bis demnächst
Matthias

[Camping_RIDER]

Aloha ;)

Ja, du hast natürlich recht - hier ging's aber ursprünglich um ein Wiki-Beispiel für output. Ich habe ja mittlerweile auch eins mit css-animation gefunden; aber am anschaulichsten und sinnvollsten ist doch wohl etwas wie der Schieberegler, auch wenn er sehr simpel ist, oder die Berechnung des Body-Mass-Index.

Mein Senf sagt folgendes dazu: Wenns um anschaulich geht hast du sicher Recht, dass was CSS-/JS-getriebenes als Beispiel was hermacht. Wenns darum geht, semantische Auszeichnung als Lernziel in den Vordergrund zu stellen (und das ist im HTML-Bereich ja sicher auch ein wichtiges, wenn nicht das wichtigste, Lernziel), dann kann es auch Sinn ergeben einfach (vielleicht auch zusätzlich) Inhalt zu zeigen, der das 'output'-Element einfach nur zur Auszeichnung statischen Inhalts zeigt.

Ansonsten wird das, was Gunnar hier richtigerweise als Anwendungszweck betont, sicher auch einfach gerne vergessen, weil das Element aufgrund der Coolness des Beispiels vielleicht als rein-dynamisches Element wahrgenommen wird.

Grüße,

RIDER

[Gunnar Bittersmann]

@@Felix Riesterer

1. Sollte man das output-Element nicht per JavaScript ins Dokument schreiben […], da es ohne JavaScript nicht mehr die gewünschte Funktionalität bietet

Einfacher als das wäre wohl <output hidden="hidden"></output> und das hidden-Attribut per JavaScript entfernen.

LLAP 🖖