Signatur
Beschreibung
Die Eigenschaft htmlFor eines HTMLOutputElement spiegelt das HTML-Attribut for des <output>-Elements wider. Das Attribut enthält eine durch Leerzeichen getrennte Liste von IDs. Sie verweisen auf die Elemente, deren Werte in die angezeigte Berechnung einfließen oder sie auf andere Weise beeinflussen, zum Beispiel zwei Zahlenfelder, deren Summe im <output> steht.
Der Name lautet htmlFor und nicht for, weil for in JavaScript ein reserviertes Wort ist. Das gleiche Muster gibt es bei HTMLLabelElement.htmlFor. Anders als beim Label ist der Wert hier aber kein String, sondern eine dynamische DOMTokenList. Mit add(), remove(), toggle(), contains() und replace() kannst du die Liste gezielt ändern. Jede Änderung wird sofort in das for-Attribut geschrieben und umgekehrt.
Die Eigenschaft selbst ist schreibgeschützt: Du kannst ihr kein neues DOMTokenList-Objekt zuweisen. Weil sie mit [PutForwards=value] definiert ist, wird die Zuweisung eines Strings (output.htmlFor = "a b") aber an htmlFor.value weitergeleitet und ersetzt damit den Attributinhalt.
Nützlich ist htmlFor vor allem, um den Zusammenhang zwischen Eingaben und Ergebnis für Barrierefreiheit und Wartbarkeit festzuhalten. Außerdem kannst du darüber die beteiligten Eingabefelder per Skript finden und etwa eine Neuberechnung allgemein umsetzen.
Rückgabewert
DOMTokenList mit den IDs aus dem for-Attribut. Fehlt das Attribut, ist die Liste leer (length === 0, value === "").Beispiele
IDs der beteiligten Eingaben auslesen
// HTML:
// <form id="calc">
// <input type="number" id="a" value="2"> +
// <input type="number" id="b" value="3"> =
// <output id="result" name="result" for="a b"></output>
// </form>
const output = document.getElementById('result');
console.log(output.htmlFor); // DOMTokenList
console.log(output.htmlFor.length); // Anzahl der IDs
console.log([...output.htmlFor]); // als Array
console.log(output.htmlFor.value); // Rohwert des AttributsNeuberechnung allgemein über htmlFor umsetzen
// Jedes <output> summiert automatisch die Felder, die in seinem for-Attribut stehen
const recalc = (output) => {
const sum = [...output.htmlFor]
.map((id) => document.getElementById(id))
.filter(Boolean)
.reduce((acc, el) => acc + (Number(el.value) || 0), 0);
output.value = String(sum);
};
document.querySelectorAll('output[for]').forEach((output) => {
for (const id of output.htmlFor) {
document.getElementById(id)?.addEventListener('input', () => recalc(output));
}
recalc(output); // Startwert anzeigen
});Token-Liste dynamisch ändern
const output = document.getElementById('result');
// Ein neues Feld c hinzufügen
output.htmlFor.add('c');
console.log(output.getAttribute('for'));
// Prüfen und entfernen
console.log(output.htmlFor.contains('a'));
output.htmlFor.remove('a');
console.log(output.htmlFor.value);
// String-Zuweisung wird an .value weitergeleitet (PutForwards)
output.htmlFor = 'x y';
console.log(output.getAttribute('for'));// Wichtig · Fallstricke
- Nicht mit
HTMLLabelElement.htmlForverwechseln: Beim Label isthtmlForein einfacher String mit genau einer ID. Beim<output>ist es eineDOMTokenList. Code wieoutput.htmlFor === 'a'ist deshalb immerfalse. Verwende stattdessenoutput.htmlFor.contains('a')oderoutput.htmlFor.value. - Keine automatische Berechnung: Das
for-Attribut beschreibt nur den Zusammenhang. Der Browser rechnet nichts aus und aktualisiert das<output>nicht selbst. Den Wert musst du per Skript setzen, etwa überoutput.valueoder iminput-Ereignis des Formulars. - Keine Prüfung der IDs: Die Liste kann IDs enthalten, zu denen es kein Element gibt. Prüfe beim Auflösen per
getElementById()deshalb aufnull. - Keine Leerzeichen in Tokens: Ruft man
add()oderremove()mit einem Token auf, das Leerzeichen enthält, wird einInvalidCharacterErrorausgelöst, bei einem leeren String einSyntaxError. - Kompatibilität: Wird von allen modernen Browsern unterstützt. Die Weiterleitung einer String-Zuweisung an
value([PutForwards=value]) funktioniert in sehr alten Browsern eventuell nicht. Setze das Attribut im Zweifel mitsetAttribute('for', …).