How to change the Content of a <textarea> using JavaScript ?
Given an HTML document containing a <textarea> element and the task is to change the content of a <textarea> element with the help of JavaScript.
Method 1: This method uses id attribute of textarea with value property to change the content of <textarea> element. JavaScript code is written within the <script> tag.
Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!
HTML
<!DOCTYPE html><html><head> <title> How to change the Content of a textarea using JavaScript? </title></head><body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to change the Content of a <textarea> with JavaScript? </h3> <textarea id="textArea"> A Computer Science Portal </textarea> <br><br> <button onclick="changeContent()"> Click to change </button> <script> // JavaScript code to change // the content of <textarea> function changeContent() { var x = document.getElementById('textArea'); x.value = "GeeksforGeeks"; } </script></body></html> |
Output:
- Before clicking the button:
- After clicking the button:
Method 2: This method uses the id attribute of the textarea with innerHTML property to change the content of <textarea> element. JavaScript code is written within the <script> tag.
HTML
<!DOCTYPE html><html><head> <title> How to change the Content of a textarea using JavaScript? </title></head><body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to change the Content of a <textarea> with JavaScript? </h3> <textarea id="textArea"> A Computer Science Portal </textarea> <br><br> <button onclick="changeContent()"> Click to change </button> <script> // JavaScript code to change // the content of <textarea> function changeContent() { document.getElementById('textArea').innerHTML = "GeeksforGeeks"; } </script></body></html> |
Output:
- Before clicking the button:
- After clicking the button:
Method 3: This method uses id attribute of the textarea with innerText property to change the content of <textarea> element. JavaScript code is between the <script> tag.
HTML
<!DOCTYPE html><html><head> <title> How to change the Content of a textarea using JavaScript? </title></head><body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to change the Content of a <textarea> with JavaScript? </h3> <textarea id="textArea"> A Computer Science Portal </textarea> <br><br> <button onclick="changeContent()"> Click to change </button> <script> // JavaScript code to change // the content of <textarea> function changeContent() { document.getElementById('textArea').innerText = "GeeksforGeeks"; } </script></body></html> |
Output:
- Before clicking the button:
- After clicking the button:
