Frage zum Wiki-Artikel „Ergebnisausgabe“

[Wolfram]

Hi, der hier dargestellte Code funktioniert prima im Firefox. im Explorer (11) passiert hingegen nichts. Das betrifft beide Beispiele. Beim Beispiel mit dem Stundenzettel werden im ff auch die kleinen Pfeile in den TextBoxen angezeigt, mit denen man den Wert hoch/runtersetzen kann (je nach step). Im ie fehlen diese Pfeile, man kann also nur Zahlen eintippen.

Woran könnte das liegen? Sicherheitseinstellungen im ie stehen auf Standard, da sollte also nichts blockiert werden.

Danke und Grüße

[Matthias Apsel]

Hallo Wolfram,

Hi, der hier dargestellte Code funktioniert prima im Firefox. im Explorer (11) passiert hingegen nichts. Das betrifft beide Beispiele. Beim Beispiel mit dem Stundenzettel werden im ff auch die kleinen Pfeile in den TextBoxen angezeigt, mit denen man den Wert hoch/runtersetzen kann (je nach step). Im ie fehlen diese Pfeile, man kann also nur Zahlen eintippen.

Das betrifft auch das Beispiel zu type="number", im edge lässt sich das input-feld wenigstens mit den Pfeiltasten bedienen.

Woran könnte das liegen? Sicherheitseinstellungen im ie stehen auf Standard, da sollte also nichts blockiert werden.

CanIUse schreibt:

• IE: UI widget does not include increment/decrement buttons.
• Edge: Does not include increment/decrement buttons, but does supports increment/decrement via arrow up & down keys.

Also liegts am Browser.

Bis demnächst
Matthias

[Wolfram]

Hi, das ging ja schnell! Damit erklären sich auf jeden Fall die fehlenden Pfeile, aber warum funktioniert die Berechnung nicht im ie? Das sollte ja Browser-unabhängig funktionieren… Grüße

[Matthias Apsel]

Hallo Wolfram,

aber warum funktioniert die Berechnung nicht im ie? Das sollte ja Browser-unabhängig funktionieren…

<form oninput="x.value=parseInt(a.value)">
    Lautstärke:
    <input type="range" id="a" value="50">
    <output name="x" for="a">50</output>
</form>

Weil die Variablen a und x offensichtlich nicht bekannt sind. Das Beispiel ist javascriptseitig schlecht. Es muss verbessert werden.

Bis demnächst
Matthias

[Wolfram]

Hi, zunächst nochmal danke für die super schnelle Antwort! Was genau ist damit gemeint, dass die Variablen nicht bekannt sind? Bei dem zweiten Beispiel auf dieser Seite (Stundenzettel) funktioniert das ja auch nicht.

Kurze Info: Ich bin html/js-Einsteiger, falls das noch nicht aufgefallen ist...^^ Versuche mir grad mühsam, die Beispiele dieser Seite logisch zu erschließen…

Vielen Dank!

[Matthias Apsel]

Hallo Wolfram,

Was genau ist damit gemeint, dass die Variablen nicht bekannt sind?

Damit man mit JavaScript mit irgendwelchen Elementen arbeiten kann, muss man sich diese Elemente aus dem DOM heraussuchen.

<h2>Ergebnisausgabe eines Schiebereglers</h2>
<label for="volume">Lautstärke:</label>
<input type="range" id="volume" value="50">
<output id="output" for="volume">50</output>

document.getElementById('volume').addEventListener('input', ausgeben);

Hier wird das Element mit der ID volume ausgewählt und der Browser wird beauftragt, darauf zu achten, ob bei diesem Element Eingaben vorgenommen werden. Falls das der Fall ist, soll die Funktion ausgeben ausgeführt werden.

function ausgeben(ev) {
    document.getElementById('output').value = ev.target.value;
}

Diese bekommt als Parameter das auslösende Event (Ereignis) übergeben. Damit ist die Funktion flexibel, sie könnte von ganz vielen überwachten input-Elementen die Werte in das eine output-Element schreiben.

In der Zeile wird das Element mit der ID output herausgesucht und der Wert dieses Elements wird verändert. Er bekommt den Wert desjenigen Elements, bei dem das Ereignis ausgelöst wurde, was also Ziel der Eingabe war.

Bis demnächst
Matthias

[Wolfram]

hhm, bei mir läuft das so auch nicht (im Explorer, in Firefox wie immer kein Problem...).

Auch beim Versuch, das zweite Beispiel weiterzubauen (ich versuche, 4 Eingabefelder und eine Checkbox additiv und multiplikativ zu verknüpfen), läuft alles nur im ff.

[Matthias Apsel]

Hallo Wolfram,

hhm, bei mir läuft das so auch nicht (im Explorer, in Firefox wie immer kein Problem...).

Da bin ich überfragt.

Bis demnächst
Matthias

[Camping_RIDER]

Aloha ;)

hhm, bei mir läuft das so auch nicht (im Explorer, in Firefox wie immer kein Problem...).

Da bin ich überfragt.

Aus irgendeinem Grund funktionieren beide addEventListener im IE11 nicht. Sieht man daran, dass a) nichts passiert und dass b) die Funktion ausgeben nach dem Laden nicht definiert ist. Worans genau liegt weiß ich im Moment aber auch nicht.

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

Aus irgendeinem Grund funktionieren beide addEventListener im IE11 nicht. Sieht man daran, dass a) nichts passiert und dass b) die Funktion ausgeben nach dem Laden nicht definiert ist. Worans genau liegt weiß ich im Moment aber auch nicht.

Das war natürlich Quatsch. ausgeben ist gekapselt, wie zu erwarten war, und DOMContentLoaded funktioniert. Nur das mit input offensichtlich nicht.

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

Nur das mit input offensichtlich nicht.

Nach langer Suche hab ich jetzt die Probleme identifiziert. Es sind zwei.

Erstens:

Es muss da wirklich ein Problem mit input im IE11 geben. Mit onchange statt oninput funktioniert das Beispiel - entgegen der Angaben bei caniuse.

Allerdings steht woanders auch der Grund für dieses Verhalten: „IE10 & 11 fire the "change" event instead of "input" on mousemove.“ Das ist zwar nicht was ich unter mousemove verstanden habe (speziell, weil oninput auch bei Tastatureingabe nicht gefeuert wird), aber offensichtlich unterstützt der IE11 oninput speziell bei range nicht.

Verwendet man change funktioniert das Beispiel …

… fast, denn es gibt noch ein zweites Problem:

Ganz offensichtlich greift der IE11 für <output> nicht auf den value zu, diesen zu setzen ist also völlig ergebnislos. Im IE11 muss man, um <output> zu verändern, offenbar stattdessen innerHTML (oder vergleichbares) setzen.

Was mich zu der Frage bringt, warum wir überhaupt das Beispiel für den IE11 verändern, wenn der offenbar die grundlegendsten Dinge in der Form nicht kann.

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

<form oninput="x.value=parseInt(a.value)">
    Lautstärke:
    <input type="range" id="a" value="50">
    <output name="x" for="a">50</output>
</form>

Weil die Variablen a und x offensichtlich nicht bekannt sind. Das Beispiel ist javascriptseitig schlecht. Es muss verbessert werden.

Jein. Das Beispiel nutzt zwei Dinge aus, die normalerweise gegeben sind - nur offenbar im IE nicht.

Normalerweise (z.B. in Chrome) passieren zwei Dinge:

1. Elemente^[1] mit einer ID werden im globalen window-Objekt als Eigenschaft registriert.
2. Formularelemente^[1:1] mit NAME und/oder ID werden im Formular sowohl unter ihrem NAME als auch unter ihrer ID als Eigenschaft registriert.

Es geht ja hier um die Zeile x.value=parseInt(a.value). Die funktioniert auch, falls eben diese Dinge passiert sind - denn da der „Ausführungskontext“ des Event-Handlers (this) das Formular sind eben auch dessen Eigenschaft a (das Formularelement mit ID) und x (das Formularelement mit NAME) ohne weitere Angabe referenzierbar. a wäre sogar außerhalb des Formularkontexts verfügbar, da es wegen der ID ja global registriert wird.

Ich hoffe das war jetzt verständlich ausgedrückt.

Ein kurzer Test mit der IE-Konsole sagt, dass im IE im Formular zwar a registriert wird, x allerdings nicht (document.querySelector("form").a liefert ein Ergebnis, document.querySelector("form").x nicht). Abgesehen davon wird a auch nicht als globale Variable registriert.

Was ich noch herausfinden muss, ist, welche der beiden Aktionen nun eigentlich standardkonform ist (und damit, wer hier eigentlich was falschmacht - der Javascript-Code oder der IE).

Grüße,

RIDER

---

1. Genauer: deren DOM-Repräsentation ↩︎ ↩︎

[Camping_RIDER]

Aloha ;)

Was ich noch herausfinden muss, ist, welche der beiden Aktionen nun eigentlich standardkonform ist (und damit, wer hier eigentlich was falschmacht - der Javascript-Code oder der IE).

Laut WHATWG macht der IE was falsch. Demgemäß müssen Elemente mit id über das window-Objekt erreichbar sein. Allerdings ist das hier nicht das, was das Beispiel zerstört, da a ja im Eventhandler-Kontext definiert ist.

Grüße,

RIDER