Dado un documento HTML que contiene un elemento <textarea> y la tarea es cambiar el contenido de un elemento <textarea> con la ayuda de JavaScript.
Método 1: este método utiliza el atributo id del área de texto con la propiedad de valor para cambiar el contenido del elemento <área de texto>. El código JavaScript está escrito dentro de la etiqueta <script> .
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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: este método utiliza el atributo id del área de texto con la propiedad innerHTML para cambiar el contenido del elemento <textarea>. El código JavaScript está escrito dentro de la etiqueta <script> .
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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 3: este método utiliza el atributo id del área de texto con la propiedad texto interior para cambiar el contenido del elemento <área de texto>. El código JavaScript está entre la etiqueta <script> .
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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón: