diff --git a/files/en-us/web/api/htmlbuttonelement/value/index.md b/files/en-us/web/api/htmlbuttonelement/value/index.md new file mode 100644 index 000000000000000..228282713232704 --- /dev/null +++ b/files/en-us/web/api/htmlbuttonelement/value/index.md @@ -0,0 +1,38 @@ +--- +title: "HTMLButtonElement: value property" +short-title: value +slug: Web/API/HTMLButtonElement/value +page-type: web-api-instance-property +browser-compat: api.HTMLButtonElement.value +--- + +{{ APIRef("HTML DOM") }} + +The **`value`** property of the {{DOMxRef("HTMLButtonElement")}} interface represents the value of the {{htmlelement("button")}} element as a string, or the empty string if no value is set. It reflects the element's [`value`](/en-US/docs/Web/HTML/Element/button#value) attribute. + +This property can also be set directly, for example to set a value based on some condition. + +## Value + +A string containing the value of the {{htmlelement("button")}} element, . + +## Examples + +```js +const buttonElement = document.getElementById("givenname"); +console.log(`value: ${buttonElement.value}`); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("button")}} +- {{DOMXref("HTMLButtonElement.type")}} +- {{DOMXref("HTMLButtonElement.labels")}} diff --git a/files/en-us/web/api/htmloptionelement/value/index.md b/files/en-us/web/api/htmloptionelement/value/index.md new file mode 100644 index 000000000000000..0fa95d436724e5e --- /dev/null +++ b/files/en-us/web/api/htmloptionelement/value/index.md @@ -0,0 +1,38 @@ +--- +title: "HTMLOptionElement: value property" +short-title: value +slug: Web/API/HTMLOptionElement/value +page-type: web-api-instance-property +browser-compat: api.HTMLOptionElement.value +--- + +{{ APIRef("HTML DOM") }} + +The **`value`** property of the {{DOMxRef("HTMLOptionElement")}} interface represents the value of the {{htmlelement("option")}} element as a string, or the empty string if no value is set. It reflects the element's [`value`](/en-US/docs/Web/HTML/Element/option#value) attribute, if present. Otherwise, it reflects the contents of the element, similar to the {{domxref("Node.textContent","textContent")}} property. + +## Value + +A string containing the `value` attribute value, if present, or the contents of the element. + +## Examples + +```js +const optionElement = document.querySelector("datalist option:first-of-type"); +const oldValue = optionElement.value; +optionElement.value = oldValue.toUpperCase(); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("option")}} +- {{DOMXref("HTMLOptionElement.selected")}} +- {{DOMXref("HTMLOptionElement.defaultSelected")}} +- {{DOMXref("HTMLOptionElement.label")}} diff --git a/files/en-us/web/api/htmloutputelement/value/index.md b/files/en-us/web/api/htmloutputelement/value/index.md new file mode 100644 index 000000000000000..850aef3c76abd13 --- /dev/null +++ b/files/en-us/web/api/htmloutputelement/value/index.md @@ -0,0 +1,40 @@ +--- +title: "HTMLOutputElement: value property" +short-title: value +slug: Web/API/HTMLOutputElement/value +page-type: web-api-instance-property +browser-compat: api.HTMLOutputElement.value +--- + +{{ APIRef("HTML DOM") }} + +The **`value`** property of the {{DOMxRef("HTMLOutputElement")}} interface represents the value of the {{htmlelement("output")}} element as a string, or the empty string if no value is set. It reflects the contents of the element, similar to the {{domxref("Node.textContent","textContent")}} property. + +> [!NOTE] +> When the `value` property of an `` element is set, the element goes into value mode and the default value is accessible only through the {{DOMXref("HTMLOutputElement.defaultValue")}} property. + +## Value + +A string containing the contents of the {{htmlelement("output")}} element, . + +## Examples + +```js +const outputElement = document.getElementById("#log"); +console.log(`value: ${outputElement.value}`); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("output")}} +- {{DOMXref("HTMLOutputElement.defaultValue")}} +- {{DOMXref("HTMLOutputElement.labels")}} +- {{DOMXref("HTMLOutputElement.htmlFor")}} diff --git a/files/en-us/web/api/htmltextareaelement/value/index.md b/files/en-us/web/api/htmltextareaelement/value/index.md new file mode 100644 index 000000000000000..8dac89ef5ff91e5 --- /dev/null +++ b/files/en-us/web/api/htmltextareaelement/value/index.md @@ -0,0 +1,41 @@ +--- +title: "HTMLTextAreaElement: value property" +short-title: value +slug: Web/API/HTMLTextAreaElement/value +page-type: web-api-instance-property +browser-compat: api.HTMLTextAreaElement.value +--- + +{{ APIRef("HTML DOM") }} + +The **`value`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface represents the value of the {{htmlelement("textarea")}} element as a string, which is an empty string if the widget contains no content. It reflects the raw value contained in the control. + +This property can also be set directly, for example to set or update the value based on some condition. + +## Value + +A string containing the contents of the {{htmlelement("textarea")}} element, . + +## Examples + +```js +const textareaElement = document.getElementById("comment"); +const oldText = textArea.value; +textArea.value = oldText.toUpperCase(); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("textarea")}} +- {{DOMXref("HTMLTextAreaElement.textLength")}} +- {{DOMXref("HTMLTextAreaElement.labels")}} +- {{DOMXref("HTMLTextAreaElement.selectionStart")}} +- {{DOMXref("HTMLTextAreaElement.selectionEnd")}}