Need help with my innerHtml code?

Hello & Thanks;
I am trying to copy text from a textarea into a paragraph .
No errors , but its not working .

<!DOCTYPE html>
<html>
<body>
<h5>Copy-Text-from-textarea-to-div.html</h5>
Field1: <input type="text" id="field1" value="Hello from Field1 !"><br>
Field2: <input type="text" id="field2"><br><br>

<button onclick="myFunction()">Copy text From field1 to field2</button>
<button onclick="saveItAll()">Copy text From textarea to contentEditable-div</button>

<br><br>
<textarea  class="copyFrom"  rows="4" cols="20">TextArea1 </textarea>
<br>
<textarea class="copyFrom" rows="4" cols="20"  >TextArea2 </textarea>
<br>
<div class="pasteInto" contentEditable="true" >pasteInto 1</div>
<div class="pasteInto" contentEditable="true" >pasteInto 2</div>

<p>A function is triggered when the button is clicked. The function copies the text from Field1 into Field2.</p>
<script>
var copyFromVar = ""; 
var fromCount = 0; //  = document.getElementsByClassName("copyFrom");
var intoCount = 0;  //  = document.getElementsByClassName("pasteInto");
function saveItAll() {
  fromCount   = document.getElementsByClassName("copyFrom");
  intoCount    = document.getElementsByClassName("pasteInto");

  copyFromVar = fromCount[0].innerHtml ;
  intoCount[0].innerHtml   = copyFromVar;
alert("1 copyFromVar = " + copyFromVar );
  
  copyFromVar = fromCount[1].innerHtml ;
  intoCount[1].innerHtml   = copyFromVar;
alert("2 copyFromVar = " + copyFromVar );
  
}
</script>
<script>
function myFunction() {
  document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>

</body>
</html>

Thanks for your help !

textareas dont use innerHtml, they use .value.

2 Likes

copyFromVar = fromCount[0].innerHtml ;
intoCount[0].innerHtml = copyFromVar;
alert("1 copyFromVar = " + copyFromVar );

copyFromVar = fromCount[1].innerHtml ;
intoCount[1].innerHtml = copyFromVar;
alert("2 copyFromVar = " + copyFromVar );

should be innerHTML

Thanks

<textarea id=ta>hiyas</textarea>

<script>
ta.innerHTML = 'goodbye'// textarea displays goodbye
</script>

@Shaka_Zorba Now try typing something into the box and then console.log(ta.innerHTML);

innerHTML will read the HTML-encoded contents of the box when the page is loaded.
value will read what has actually been typed into the box, which is what will be of actual use to anybody interacting with the textbox with Javascript.

Thanks Shaka_Zorba m_hutley :

I’ve been having probs with some Posts .
Sometimes you system won’t let me Reply .
Instead it sends me some Free-Book page .
Loop-de-loop and I can’t get past Reply .

Anyways , Thanks for your Help !

Thanks:
What did I do wrong ?
I’m getting error:
TypeIntoTextarea-ShowIn-Console.Log.html:28 undefined
Hmm…
your system keeps rejecting my code (the tail end of it) , so I popped it out here:
http://vmars.us/ShowMe/TypeIntoTextarea-ShowIn-Console.Log.html
Thanks

console.log(toConsoleLogId.innerHTML.value);

should be
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.

1 Like

Wow! Thats great info!!!

         function sendToConcoleLog() {
         var  var01 = toConsoleLogId.value;
		 console.log(var01);
		 alert(var01);
         
         var  var01 = toConsoleLogId.innerHTML;
		 console.log(var01);
		 alert(var01);
        }

Thanks

Thanks m_hutley and others @
" https://www.sitepoint.com/community/c/javascript "

Thought I would make a turorial so I remember what I learned from yous recently ,
and to pass on you folks’ wisdom :

http://vmars.us/ShowMe/Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore.html
Thanks

1 Like