diff --git a/files/en-us/web/api/htmloutputelement/defaultvalue/index.md b/files/en-us/web/api/htmloutputelement/defaultvalue/index.md new file mode 100644 index 000000000000000..570ab6fc8d77cd5 --- /dev/null +++ b/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 +
+ +``` + +```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")}} diff --git a/files/en-us/web/api/htmloutputelement/htmlfor/index.md b/files/en-us/web/api/htmloutputelement/htmlfor/index.md new file mode 100644 index 000000000000000..1ea23125045c040 --- /dev/null +++ b/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")}}