Javascript: get the value of a textarea (not working)

Question

I have a simple textarea but I can’t get the value typed in it, which is pretty weird, code below.

HTML

<textarea type="text" class="textarea" id="description2"></textarea> 
//Digitei aqui a palavra teste

Js

var oi = document.getElementById("description2").value; 
console.log(oi); 
//resultado: "" 
// deveria ser "teste"

Caught element:

accessKey: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: _ngcontent-c1, 1: class, 2: formcontrolname, 3: id, 4: required, 5: type, 6: ng-reflect-required, 7: ng-reflect-name, _ngcontent-c1: _ngcontent-c1, class: class, formcontrolname: formcontrolname, id: id, required: required, …}
autocapitalize: ""
autocomplete: ""
autofocus: false
baseURI: "http://localhost:4200/"
childElementCount: 0
childNodes: NodeList []
children: HTMLCollection []
classList: DOMTokenList(5) ["textarea", "error-field", "ng-touched", "ng-dirty", "ng-valid", value: "textarea error-field ng-touched ng-dirty ng-valid"]
className: "textarea error-field ng-touched ng-dirty ng-valid"
clientHeight: 98
clientLeft: 1
clientTop: 1
clientWidth: 516
cols: 20
contentEditable: "inherit"
dataset: DOMStringMap {}
defaultValue: ""
dir: ""
dirName: ""
disabled: false
draggable: false
firstChild: null
firstElementChild: null
form: form#form.form.ng-invalid.ng-touched.ng-dirty
hidden: false
id: "description2"
**innerHTML: ""
innerText: ""
inputMode: ""**
isConnected: true
isContentEditable: false
labels: NodeList(2) [label.label, label.label]
lang: ""
lastChild: null
lastElementChild: null
localName: "textarea"
maxLength: -1
minLength: -1
name: ""
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: app-form-error-message.form-error-message-component
nextSibling: app-form-error-message.form-error-message-component
nodeName: "TEXTAREA"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 100
offsetLeft: 0
offsetParent: div.form-group
offsetTop: 40
offsetWidth: 518
onabort: (...)
onauxclick: (...)
onbeforecopy: (...)
onbeforecut: (...)
onbeforepaste: (...)
onblur: (...)
oncancel: (...)
oncanplay: (...)
oncanplaythrough: (...)
onchange: (...)
onclick: (...)
onclose: (...)
oncontextmenu: (...)
oncopy: (...)
oncuechange: (...)
oncut: (...)
ondblclick: (...)
ondrag: (...)
ondragend: (...)
ondragenter: (...)
ondragleave: (...)
ondragover: (...)
ondragstart: (...)
ondrop: (...)
ondurationchange: (...)
onemptied: (...)
onended: (...)
onerror: (...)
onfocus: (...)
onfullscreenchange: (...)
onfullscreenerror: (...)
ongotpointercapture: (...)
oninput: (...)
oninvalid: (...)
onkeydown: (...)
onkeypress: (...)
onkeyup: (...)
onload: (...)
onloadeddata: (...)
onloadedmetadata: (...)
onloadstart: (...)
onlostpointercapture: (...)
onmousedown: (...)
onmouseenter: (...)
onmouseleave: (...)
onmousemove: (...)
onmouseout: (...)
onmouseover: (...)
onmouseup: (...)
onmousewheel: (...)
onpaste: (...)
onpause: (...)
onplay: (...)
onplaying: (...)
onpointercancel: (...)
onpointerdown: (...)
onpointerenter: (...)
onpointerleave: (...)
onpointermove: (...)
onpointerout: (...)
onpointerover: (...)
onpointerup: (...)
onprogress: (...)
onratechange: (...)
onreset: (...)
onresize: (...)
onscroll: (...)
onsearch: (...)
onseeked: (...)
onseeking: (...)
onselect: (...)
onselectionchange: (...)
onselectstart: (...)
onstalled: (...)
onsubmit: (...)
onsuspend: (...)
ontimeupdate: (...)
ontoggle: (...)
onvolumechange: (...)
onwaiting: (...)
onwebkitfullscreenchange: (...)
onwebkitfullscreenerror: (...)
onwheel: (...)
outerHTML: "<textarea _ngcontent-c1="" class="textarea "  id="description2" required="" type="text" ></textarea>"
**outerText: ""**
ownerDocument: document
parentElement: div.form-group
parentNode: div.form-group
placeholder: ""
prefix: null
previousElementSibling: label.label
previousSibling: label.label
readOnly: false
required: true
rows: 2
scrollHeight: 98
scrollLeft: 0
scrollTop: 0
scrollWidth: 516
selectionDirection: "forward"
selectionEnd: 0
selectionStart: 0
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: 0
tagName: "TEXTAREA"
textContent: ""
textLength: 0
title: ""
translate: true
type: "textarea"
validationMessage: "Preencha este campo."
validity: ValidityState {valueMissing: true, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}
**value: ""**
willValidate: true
wrap: ""
__zone_symbol__blurfalse: [ZoneTask]
__zone_symbol__compositionendfalse: [ZoneTask]
__zone_symbol__compositionstartfalse: [ZoneTask]
__zone_symbol__inputfalse: [ZoneTask]
__proto__: HTMLTextAreaElement

Does anyone know what could be going wrong here?

Answer 1

Here it worked perfectly.... if you click the button will appear "something", if you change the value and click again, appears what you typed, see if there is any other error in your code.

<textarea type="text" class="textarea" id="description2">alguma coisa</textarea> 
<p>
   <button onclick='console.log(document.getElementById("description2").value);'>Pegar o valor</button>
</p>

Answer 2

I believe I have to create a button by calling a Avascript function by setting the value in the variable:

Function myFunction() { var x = Document.getElementById("myTextarea"). value; }

Answer 3

The problem is that this textarea was inside a modal, of for some reason the field is duplicated when opening the modal, so I have 2 textarea with the same id Description.

To solve I did as follows:

var oi = document.getElementsByClassName("description2")[1]; 
console.log(oi); 
//resultado: "teste"