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? -> minimal reproducible example -> "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
– Andreas, Commented Nov 11, 2020 at 10:44
Your textarea has no text so value is empty? The syntax looks ok to me. — Luckylazuli
– Luckylazuli, Commented Nov 11, 2020 at 10:47
In the beginning, yes, but even if I write something it still doesn't log anything. — Denis
– Denis, Commented Nov 11, 2020 at 10:50

Matt · Accepted Answer · 2020-11-11 10:54:34Z

2

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.

answered Nov 11, 2020 at 10:54

Matt

9407 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Iregon · Accepted Answer · 2020-11-11 10:51:45Z

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, 2020 at 10:51

Iregon

13 bronze badges

Comments

s.kuznetsov · Accepted Answer · 2020-11-11 11:04:18Z

0

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>

edited Nov 11, 2020 at 11:04

answered Nov 11, 2020 at 10:52

s.kuznetsov

15.3k3 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related