New pages for HTMLOutputElement.{defaultValue,htmlFor} (mdn#36017)

* New pages for HTMLOutputElement.{defaultValue,htmlFor}

* Fix

files/en-us/web/api/htmloutputelement/defaultvalue/index.md

@@ -0,0 +1,70 @@
+---
+title: "HTMLOutputElement: defaultValue property"
+short-title: defaultValue
+slug: Web/API/HTMLOutputElement/defaultValue
+page-type: web-api-instance-property
+browser-compat: api.HTMLOutputElement.defaultValue
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`defaultValue`** property of the {{DOMxRef("HTMLOutputElement")}} interface represents the default text content of this {{htmlelement("output")}} element. Getting and setting this value is equivalent to getting and setting {{domxref("Node.textContent", "textContent")}} on the {{htmlelement("output")}}.
+
+## Value
+
+A string.
+
+## Examples
+
+In the example below, the `defaultValue` still returns the value originally written in the HTML. Changes to {{domxref("HTMLOutputElement.value", "value")}} will not affect the `defaultValue` or its `textContent` in the DOM.
+
+```html
+<fieldset>
+  <legend>Add two numbers</legend>
+  <p>
+    <input type="number" id="operand1" value="5" aria-label="First number" />
+    +
+    <input type="number" id="operand2" value="7" aria-label="Second number" />
+    =
+    <output
+      id="result"
+      for="operand1 operand2"
+      aria-live="polite"
+      aria-controls="output"
+      >12</output
+    >
+  </p>
+</fieldset>
+<pre id="logs" aria-live="polite"></pre>
+```
+
+```js
+const logs = document.getElementById("logs");
+const operand1 = document.getElementById("operand1");
+const operand2 = document.getElementById("operand2");
+const result = document.getElementById("result");
+
+function updateResult() {
+  result.value = operand1.valueAsNumber + operand2.valueAsNumber;
+  logs.innerText = `result.defaultValue: ${result.defaultValue}\nresult.value: ${result.value}`;
+}
+
+operand1.addEventListener("input", updateResult);
+operand2.addEventListener("input", updateResult);
+updateResult();
+```
+
+{{EmbedLiveSample("examples", "", "150")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("output")}}
+- {{DOMXref("HTMLOutputElement.value")}}

files/en-us/web/api/htmloutputelement/htmlfor/index.md

@@ -0,0 +1,37 @@
+---
+title: "HTMLOutputElement: htmlFor property"
+short-title: htmlFor
+slug: Web/API/HTMLOutputElement/htmlFor
+page-type: web-api-instance-property
+browser-compat: api.HTMLOutputElement.htmlFor
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`htmlFor`** property of the {{DOMxRef("HTMLOutputElement")}} interface is a string containing a space-separated list of other elements' `id`s, indicating that those elements contributed input values to (or otherwise affected) the calculation. It reflects the [`for`](/en-US/docs/Web/HTML/Element/output#for) attribute of the {{HTMLElement("output")}} element.
+
+## Value
+
+A string.
+
+## Examples
+
+```js
+const outputElem = document.getElementById("result");
+for (const id of outputElem.htmlFor.split(" ")) {
+  const elem = document.getElementById(id);
+  elem.style.outline = "2px solid red";
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("output")}}