Copying stored text in a table and then display it back into a textarea

Question

I need your help,

How can I go about copying text (with the line breaks included) from my table and put it back into the textarea “newtext”

My existing coding doesn't seem to be working.

<html>

<head>

<style type="text/css">

.box { width: 400px; height: 50px; }

</style>

<script type="text/javascript">

function ta() {

    taValue = document.getElementById("ta").value

    taValue = taValue.replace(/\n/g, '<br/>')

    document.getElementById("tatext").innerHTML = taValue
}

function text2area() {

    document.getElementById("newtext").innerHTML = document.getElementById("tatext").innerHTML

}

</script>

</head>

<textarea class="box" id="ta" onkeyup="ta()"></textarea>

<table id="tatable"><tr><td><div id="tatext"></div></td></tr></table>

<br>

<input type="button" onclick="text2area()" value="move text">

<br><br>

<textarea class="box" id="newtext"></textarea>

</html>

score 0 · Answer 1 · answered Jan 06 '14 at 15:11

textarea does not have an innerHTML. Notice how you grabbed the value? Set it the same way! It is like this because it is a form element.

document.getElementById("tatext").value = taValue; //semi-colons are just good practice

and here:

document.getElementById("newtext").value = document.getElementById("tatext").value;

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Instead of using the function innerHTML, grab the value of the text area you want to capture, and set the value of the new text area to this. You are already using value for the variable taValue. Also, it's better practice to use addEventListener for your clicks and keyups.

function ta() {
    taValue = document.getElementById("ta").value
    taValue = taValue.replace(/\n/g, '<br/>')
    document.getElementById("tatext").value = taValue;
}

function text2area() {
    taValue = document.getElementById("ta").value;
    document.getElementById("newtext").value = taValue;
}

document.getElementById("ta").addEventListener ("onkeyup", ta, false);
document.getElementById("move-text").addEventListener ("click", text2area, false);

JSFiddle: http://jsfiddle.net/tMJ84/1/

Copying stored text in a table and then display it back into a textarea

2 Answers2