Hi Friends 👋,

Welcome To Infinitbility! ❤️

To display data in textarea using javascript, use the document.getElementById().value method to set value dyanamically, it will assign new value in the textarea.

Today, I’m going to show you How do I display data in textarea using javascript, as mentioned above, I’m going to create a sample textarea and change the content of textarea with the click of a button,

Let’s start today’s tutorial on how do you display data in textarea using javascript.

Javascript display value in textarea

Here, we will do

  1. Create a sample textarea and assign an id
  2. Create a function that changes the value of the text area
  3. Create a button and call the function in the onClick event
<!DOCTYPE html>
<html>
  <body>
    <!-- Create sample textarea and assign id -->
    Message:<br />
    <textarea id="textarea">Hi Friends, Welcome to Infinitbility</textarea>

    <!-- Create a button and call the function in the onClick event  -->
    <button type="button" onclick="myFunction()">Change The Message</button>

    <script>
      // Create a function that changes the value of the text area
      function myFunction() {
        document.getElementById("textarea").value =
          "Let's do some fun work";
      }
    </script>
  </body>
</html>

Output

I hope it helps you, All the best 👍.