JavaScript Get Textarea Input via .Value or .Innerhtml

JavaScript get TextArea input via .value or .innerHTML?

You should use .value

myTextArea.value

Should I use .innerHTML or .value for textarea?

You access and update the value of a textarea element through the "value" property.

Try:

 var theValue = document.getElementById("editorHead").value;

Updating the <html> element doesn't make much sense.

How to pass input from one textarea to another's output?

Not sure what part of your JavaScript that is, but str is not defined. Here's a working version.

const uppercaseEl = document.getElementById('outputText')
function update(el) {
    uppercaseEl.value = el.value.toUpperCase()
}

<h3>INPUT</h3>
<textarea id="inputText" oninput="update(this)" placeholder="input" cols="70" rows="10" wrap="on"></textarea>
<h3>OUTPUT</h3>
<textarea id="outputText" placeholder="output" cols="70" rows="10" wrap="on" readonly></textarea>

When do I use .val() vs .innerHTML?

.val() is used to get/replace input elements values in jQuery, alternative in JS is .value.

innerHTML or jQuery's .html() is used to get/replace the whole markup inside an element, not input elements.

text() is used almost the same as JS innertHTML, only it gets/replaces the text inside an element, not all the tags etc. It's bassically the equivalent of JS innerText

Reference links about innerHTML, innerText, val(), text(), html()

Inner HTML with input values

The new value is stored as a property not an attribute, the value can be obtained by inputelement.value, modifying the value does not affect the attribute. If you want the html with the new value just set the attribute to the new value.

For check boxes and radio buttons set the checked attribute, set the innerHTML for text areas, for selects set the selected attribute on the option

http://jsfiddle.net/mowglisanu/F7urT/5/

Copy text from div innerHtml to textarea

Since a textarea is a form element, neither .innerText or .innerHTML will work. You need to extract its content with the value property (or .val() with JQuery).

And FYI:

It's innerText, not .innertext.
.innerText is a property, not a function, so you don't use () after it.
It's .innerHTML, not .innerHtml.
innerHTML is used when there is HTML in the string that should be
parsed as HTML and .textContent is used for strings that should not
be parsed as HTML. Usually, you don't map the contents of one to the
other.
document.querySelectorAll() scans the entire DOM to find all
matching nodes. If you know you only have one matching node or you
only want the first matching node, that's a waste of resources.
Instead, use .querySelector(), which stops searching after the
first match is found.
Since you are using JQuery, you should be consistent in its use. There's no need for .querySelector() or .querySelectorAll() with JQuery, just use JQuery selector syntax.

Here's an example that shows both the vanilla JavaScript and JQuery approaches using the HTML types that you show in your question with the same id values and nesting structure that you show. You can see that I'm using different selectors to correctly locate the input/output elements.

// Standare DOM queries to get standard DOM objectslet source = document.getElementById("source");let destination = document.querySelector("#spelling-correction > a");
// JQuery syntax to get JQuery objects:let jSource = $("#source");let jDestination = $("#spelling-correction > a");
// Vanilla JavaScript way to set up the event handler and do the worksource.addEventListener("keyup", function(){  destination.textContent = source.value;  });
// JQuery way to set up the event handler and do the workjSource.on("keyup", function(){  jDestination.text(jSource.val());   });

textarea, div {  border:3px solid grey;  width:500px;  height:75px;  font-size:1.5em;  font-family:Arial, Helvetica, sans-serif;}
.destination { pointer-events:none; background:#e0e0e0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p>Type in the first textarea</p><textarea id="source"></textarea><div id="spelling-correction">  Did you mean: <a href="#"></a></div>

how to change innerHTML of textarea after typing in it?

Change innerHTML to value,

<textarea id = "textarea">change this</textarea>
<div onclick = "change()">click here<div>

<script>
    function change()
    {
        document.getElementById( 'textarea' ).value = 'new text';
    }
</script>

a textarea has a value that can be altered, the innerHTML here just sets the initial value.

How do i use JavaScript to take the input from a text box to a variable then print the value of a variable?

document.getElementById("B2").onclick = function myFunction2(){ var x = Number(document.getElementById("I1").value); var y = Number(document.getElementById("I2").value); var z = x+y;  document.getElementById("H2").innerHTML = z;}

<input type="text" id="I1" value="" /> + <input type="text" id="I2" value="" /> = <button id="B2">?</button><span id="H2"></span>

JavaScript Get Textarea Input via .Value or .Innerhtml