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.
<!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.
<!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 methd uses id attribute of the textarea with innerText property to change the content of <textarea> element. JavaScript code is between the <script> tag.
<!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: