How would I move text from text areas into a new table using Javascript?

Question

I am just learning Javascript and our instructor isn't qualified to teach being that he has never used any form of code in his life. I want an onClick event to trigger a function that will move the contents of 3 text boxes in a dedicated table into specific positions on a new table meant for printing.

This is the code for the table with three text areas:

<table>

    <tr>
        <td rowspan="2">
            <textarea rows="19" cols="52"> Notes  directly from the source should go in this box. (copy and paste)</textarea>
        </td>
        <td> <textarea rows="3" cols="30">The URL or web-address of the source should go here.</textarea>
                    </td>
    </tr>
    <tr>
        <td> <textarea rows="15" cols="30">Additional notes should go in this box.</textarea>
        </td>
    </tr>

</table>

The idea is to move the 3 pieces of text onto a digital notecard. The URL being on top, the direct notes on the middle, and the student's notes on the bottom. All with slightly different basic formating. Is this possible with one onClick function or would it be a lot easier to use three. Keep in mind if I did use three functions I would need them all to be triggered by the same event.

Answer 1

You can use jQuery and copy/paste/delete content from one HTML node into another:

$('#idOfYourTargetNode').text($('#idOfYourFirstNode').text());
$('#idOfYourFirstNode').empty();

Just give the corresponding elements an like:

<td id="url">Content url ....</td>

And your target like this:

<h1 id="headlineUrl"> URL Headline </h1>

And you do this in the script tag:

$('#headlineUrl').text($('#url').text());
$('#url').empty();

Trigger it onClick for your elements. Don't forget to include jQuery.

Answer 2

First, it would be easiest if the textareas had ids that you can reference:

<tr>
<td rowspan="2">
    <textarea id="notes" rows="19" cols="52"> Notes  directly from the source should go in this box. (copy and paste)</textarea>
</td>
<td> <textarea id="address" rows="3" cols="30">The URL or web-address of the source should go here.</textarea>
            </td>

Additional notes should go in this box.

Then, you can do something like this:

$("button").on("click", function() {
  $("#newlocation1").text($("#notes").text());
  $("#newlocation2").text($("#address").text());
  $("#newlocation3").text($("#additional").text());
}

Although, there are many ways you can use the texts from this point.

Answer 3

SOLUTION

var getValueBySelector = function(c){
  return document.querySelector(c).value;
};

var each = function(array, cb){
  for(var i=0; i<array.length; i++) cb.call(array[i], i, array[i]);
};

var concatenate = function(array, sep){
  var concat = [];
  each(array, function(){ 
    concat.push(getValueBySelector(this));
  });
  return concat.join(sep);
};

document.querySelector('.concat').innerHTML = concatenate(['.notes', '.url', '.add'], '<br>');

 <table>
      <tr>
        <td rowspan="2">
          <textarea class="notes" rows="19" cols="52"> Notes  directly from the source should go in this box. (copy and paste)</textarea>
        </td>
        <td> <textarea class="url" rows="3" cols="30">The URL or web-address of the source should go here.</textarea>
        </td>
      </tr>
      <tr>
        <td> <textarea class="add" rows="15" cols="30">Additional notes should go in this box.</textarea>
        </td>
      </tr>
    </table>
    <div class="concat"></div>