2

Esto realmente es una pregunta simple, pero me gustaría saber como crear un botón, el cual al ser pulsado muestre un textarea, además, estoy trabajando con JavaScript, así que quería saber si es posible cargar el valor de una variable directamente en el textarea.

En resumen, quiero que al presionar el botón "unir" se cree un textarea con el resultado completo.

Les dejo mi código para que tengan una idea mas clara de lo que quiero hacer:

<!DOCTYPE html>
<html>
<head>
  <title>Unir con salto de linea</title>
  <meta charset="UTF-8">
</head>
<body>

<form name="prueba">
   Primera Frase: <input type="text"id="textA" />
   Frase final: <input type="text"id="textB" />
<br>
<br>
   Contenido Medio
<br>
    
   <textarea name="textC" id="textC" cols="50" rows="10"></textarea>
<br>
</form>

<script>
function unirTexto(){

var c1=document.getElementById('textA').value;
var c2=document.getElementById('textB').value;
var t1=document.getElementById('textC').value;
  var p = t1.split(/\n/g);
  var resultado = document.getElementById('resultado');
  var html = "";
   for (var i = 0; i < p.length; i++) {
    html += c1 +' '+ p[i] +' '+ c2 + "<br>";
  resultado.innerHTML = html;
}}

function limpiar() {
document.getElementById('textA').value =" ";
document.getElementById('textB').value =" ";
document.getElementById('textC').value =" ";
resultado.innerHTML = " ";
}
</script>
<button onclick="unirTexto()" id="unir">Unir</button>
<button onclick="limpiar()" id="limpiar">Limpiar</button><br>
Resultado:<br> <span id="resultado"></span>
<br>
</body>
</html>

1
  • ¿Se entiende lo que trato de hacer?
    – Gabriel
    Commented el 24 sept. 2018 a las 15:43

1 respuesta 1

2

Para lo que quieres, basicamente creas un textarea y le das la propiedad de display:none para q no se muestre desde un principio. Luego cuando apretas unir, le dices q se muestre con el display = "block". El limpiar, borra el valor del textarea, y lo vuelve a ocultar.

<!DOCTYPE html>
<html>
<head>
  <title>Unir con salto de linea</title>
  <meta charset="UTF-8">
</head>
<body>

<form name="prueba">
   Primera Frase: <input type="text"id="textA" />
   Frase final: <input type="text"id="textB" />
<br>
<br>
   Contenido Medio
<br>
    
   <textarea name="textC" id="textC" cols="50" rows="10"></textarea>
<br>
</form>

<script>
function unirTexto(){

var c1=document.getElementById('textA').value;
var c2=document.getElementById('textB').value;
var t1=document.getElementById('textC').value;
  var p = t1.split(/\n/g);
  var resultado = document.getElementById('resultado');
  var html = "";
   for (var i = 0; i < p.length; i++) {
    html += c1 +' '+ p[i] +' '+ c2;
  resultado.value = html;
  resultado.style.display = "block";
}}

function limpiar() {
document.getElementById('textA').value =" ";
document.getElementById('textB').value =" ";
document.getElementById('textC').value =" ";
resultado.value = " ";
resultado.style.display = "none";
}
</script>
<button onclick="unirTexto();" id="unir">Unir</button>
<button onclick="limpiar();" id="limpiar">Limpiar</button><br>
<br>
Resultado:<br> <textarea style="display:none;" id="resultado" rows="5" cols="50"></textarea>
<br>
</body>
</html>

Como recomendación personal, sugiero que te tomes tu tiempo para organizar el código y emprolijarlo un poco. Esto te va a ayudar mas adelante para solucionar otros problemas, o para mantenerlo.

7
  • Esto ya me sirvió bastante, pero aún sigo sin saber como hacer que el textarea que creamos aparezca automáticamente con el resultado
    – Gabriel
    Commented el 24 sept. 2018 a las 15:57
  • A que te refieres con automaticamente? Commented el 24 sept. 2018 a las 15:57
  • al presionar el botón unir, que dentro del textarea nos muestre el resultado, esto es para facilitar que luego se pueda copiar el resultado
    – Gabriel
    Commented el 24 sept. 2018 a las 15:58
  • Me parece q esta de la manera q dices, al presionar unir, se carga el valor en el text area, y se muestra. De que otra manera quieres mostrarlo? Commented el 24 sept. 2018 a las 15:59
  • 1
    Me parece q no te esta andando como corresponde. El código q te mande, si trabaja de la manera q dices. Imagino q tu problema puede venir del lado del browser q estes usando. Yo en mi caso uso Google Chrome. De todos modos, fijate en tu consola q error te esta mostrando, asi lo vemos. Commented el 24 sept. 2018 a las 16:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.