How to output a textarea in HTML to a variable in Javascript?

Question

In a HTML website I have a textarea created like this:

<textarea id = "myTextArea" rows = "30" cols = "80"></textarea>

I would like after something is written in the text area, for that text to be sent to a variable in javascript.

I have tried doing this, but it did not work:

var x = document.getElementById("myTextArea").value;

The console.log(x); gives back nothing, not null, just empty space. However, if I log out console.log(document.getElementById("myTextArea").value) then I get the text that I have written in my textarea.

Why does var x = document.getElementById("myTextArea").value; not work?

My Javascript:

<script>
var x = document.getElementById("myTextArea").value;
const regex = /([a-z]+)/;
const match = regex.exec(x);

var intervalID = window.setInterval(myCallback, 500); <!-- Calls every 5s -->

function myCallback() {
    if(match){
       const name = match[1];
       console.log(name);
    }
    else{
       console.log('no match');
       console.log(match);
    }
}

[How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) -> [mcve] -> _"Describe the problem. "It doesn't work" isn't descriptive enough to help people understand your problem. Instead, tell other readers what the expected behavior should be. Tell other readers what the exact wording of the error message is, and which line of code is producing it. Use a brief but descriptive summary of your problem as the title of your question."_ — Andreas, Nov 11 '20 at 10:44
Your textarea has no text so value is empty? The syntax looks ok to me. — Luckylazuli, Nov 11 '20 at 10:47
In the beginning, yes, but even if I write something it still doesn't log anything. — Denis, Nov 11 '20 at 10:50

score 2 · Accepted Answer · answered Nov 11 '20 at 10:54

To achieve this, you can register an event listener on your textarea:

var textArea = document.getElementById('myTextArea');

textArea.addEventListener('input', function(event){
    console.log(event.target.value);
});

The listener listens for any input events on your textara and logs the value of your textarea as the value changes.

Here's a live demo for your quick reference.

score 0 · Answer 2 · answered Nov 11 '20 at 10:51

0

You will need to use onkeyup and onchange for this. The onchange will prevent context-menu pasting, and the onkeyup will fire for every keystroke.

See my answer on How to impose maxlength on textArea for a code sample.

answered Nov 11 '20 at 10:51

Iregon

1
3

s.kuznetsov · Answer 3 · 2020-11-11T11:04:18.643

In my example, the variable is the text variable. This variable is filled with the text of the text by clicking on the button.

Was it necessary?

var x = document.getElementById("myTextArea");
var button = document.querySelector("button");
var text = "";

button.onclick = function() {
  text = x.value;
  console.log(text);
}

#myTextArea {
  width: 100%;
  height: 100px;
}

<textarea id="myTextArea" rows="30" cols="80"></textarea>
<button>Check variable with text</button>

Second example using oninput event.

var x = document.getElementById("myTextArea");
var text = "";

x.oninput = function() {
  text = this.value;
  console.log(text);
}

#myTextArea {
  width: 100%;
  height: 100px;
}

<textarea id="myTextArea" rows="30" cols="80"></textarea>

How to output a textarea in HTML to a variable in Javascript?

3 Answers3