Help: copy/paste works 1st time only?

[vmars316]

Hello & Thanks ,
I am baffled
copy from ‘textarea 1’ paste into ‘textarea 1’ only works for the first button-click .
The same button-click to ‘pre area’ works every time ?
Working all day , need new eyes .

<script>
function saveItAll() {
  fromList   = document.getElementsByClassName("copyFrom");
  intoList    = document.getElementsByClassName("pasteInto");
  intoListPre    = document.getElementsByClassName("pasteIntoPre");

  for (var i = 0; i < fromList.length; i++) {
      console.log("i = " + i ) 
      console.log("fromList.length = " + fromList.length);
      alert("fromList.length = " + fromList.length);
  copyFromVar = fromList[i].value ;
      alert("copyFromVar = " +  copyFromVar);
  intoList[i].innerHTML   = copyFromVar;
      alert("intoList[i].innerHTML = " + intoList[i].innerHTML)  ;
  intoListPre[i].innerHTML   = copyFromVar;
      alert("intoListPre[i].innerHTML = " + intoListPre[i].innerHTML)  ;
}
}//
</script> 

Can be run from here:
http://vmars.us/ShowMe/Tutorial-2-Textarea-Save-Copy-Restore-Pre-VM-noDocs.html
Thanks

[MartinMuzatko]

Use .value. .innerHTML will lead to faulty behavior.

Is there a good reason to use a loop here?
You would only need it if you were to use this component multiple times on a page. And then on button click you would copy ALL textareas to the other textarea. Which is not really meaningful.

[vmars316]

Yes , the reason is that I will be expanding program
to add more textarea elements . So I want to debug it
before I go further.

Problem:
Currently , if I click once on ‘textarea 1’ button ,
content in ‘textarea 1’ is copied into ‘textarea 2’ .
If I then erase what’s in textarea 2
And click again on ‘textarea 1’ button ,
nothing gets copied into ‘textarea 2’ .

Thanks

[vmars316]

Hmm…
I changed the code alerts to be more helpful:

<script>
function saveItAll() {
  fromList   = document.getElementsByClassName("copyFrom");
  intoList    = document.getElementsByClassName("pasteInto");
  intoListPre    = document.getElementsByClassName("pasteIntoPre");

  for (var i = 0; i < fromList.length; i++) {
      console.log("i = " + i ) 
      console.log("fromList.length = " + fromList.length);
      alert("fromList.length = " + fromList.length);
  copyFromVar = fromList[i].value ;  // fromList[i].value 
      alert("copyFromVar = fromList[i].value   = " +  copyFromVar);
  intoList[i].innerHTML   = copyFromVar;
      alert("intoList[i].innerHTML   = copyFromVar   = " + intoList[i].innerHTML)  ;
  intoListPre[i].innerHTML   = copyFromVar;
      alert("intoListPre[i].innerHTML   = copyFromVar   = " + intoListPre[i].innerHTML)  ;
}
}//
</script> 

But I am confused because of these rules:
console.log(toConsoleLogId.value); if you want what’s typed in the box, or
console.log(toConsoleLogId.innerHTML); if you want what was hardcoded into the text box’s HTML.

Should I be using .value or .innerHTML ?
Thanks

[vmars316]

Ugh!
My prob was not creating new textarea s with the class=“copyFrom” .
Hence no new ‘copyFrom’ elements .
Also , I am better understanding .value vs .innerHTML .
Thanks