¿Cómo cambiar el contenido de un <textarea> usando JavaScript?

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: 
     

Publicación traducida automáticamente

Artículo escrito por Rajnis09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *