[FIXED] How to update an empty paragraph with userinput using pure javascript?

Issue

This example in jQuery is what I am looking for in pure JavaScript.

It's an example of a <textarea> where a paragraph <p></p> is updated as the user types in the textarea.

My question is how can it be done in pure JavaScript?

An attempt on my behalf looks like this but it doesn't quite work:

HTML:

<div class="textarea">
    <textarea name="myText" id="myText" rows="2"></textarea>
</div>
<div>
    <p id="textOuput"></p>
</div>

JavaScript:

var textArea = document.getElementById('myText');

textArea.onkeyup = function() {
    var val = textArea.value,
    textOutput = document.getElementById('textOutput');
    textOutput.innerHTML = val; // Uncaught TypeError: Cannot set property 'innerHTML' of null
};

Solution

You have a typo in your id of the paragraph:

<p id="textOuput"></p>

should be:

<p id="textOutput"></p>

Adding Utkanos' comments, the JS code could look like this:

var textArea = document.getElementById('myText');
var textOutput = document.getElementById('textOutput');
textArea.onkeyup = function() {
    textOutput.innerHTML = textArea.value;
};

Answered By - Tibos

Answer Checked By - Willingham (PHPFixing Volunteer)