How to access the textarea, grab its value and display it?

Question

I’m trying to create a notepad, and it stores the data in Localstorage, however, I cannot access the value that would be typed by the user, only what is already between the Textarea tag. I would like to take the value of the textarea, when the user type it, and display it somehow.

---

> HTML

<textarea id="txtar">
o console só consegue me retornar o valor escrito no documento, quando eu preciso ter acesso ao valor digitado no campo do TextArea
</textarea>


>JAVASCRIPT

console.log( 
  document.getElementById('txtar').value
  )

Answer 1

Help yourself, my brother.

let textarea = document.querySelector("#txtar");
let botao = document.querySelector("#botao");

botao.onclick = function() {
  console.log(textarea.value);
}

<textarea id="txtar">Texto digitado dentro do textarea</textarea>
<br>
<button id="botao">Exibir Texto</button>

What you type in the textarea is the value (value) of your field. So when you display the "textarea.value", you are displaying what you typed in the textarea (the value that your textarea now has is what you typed in).

You type in the textarea field and capture its value is the same as if you leave the textarea thus:

<textarea>Texto dentro do textarea e que é o seu value</textarea>

If you capture the value of that textarea above and display it, what will be displayed is the text that is within the textarea.

Note the example I put in the answer that if you just click the first button, the text (which becomes the value) already in the textarea will be displayed. Now if you delete that text and type something else, it will display what you typed (the new value).