This really is a simple question, but I would like to know how to create a button, which when clicked shows a textarea, also, I am working with JavaScript, so I wanted to know if it is possible to load the value of a variable directly in the textarea.
In short, I want pressing the "join" button to create a textarea with the full result.
I leave you my code so that you have a clearer idea of what I want to do:
<!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>
For what you want, you basically create a
textarea
and give it the propertydisplay:none
so that it doesn't show up from the start. Then when you hit join, you tell it to show up with thedisplay = "block"
. Clearing deletes the value of the textarea, and hides it again.As a personal recommendation, I suggest you take your time to organize the code and tidy it up a bit. This will help you later to solve other problems, or to maintain it.