javascript - 如何使用纯javascript使用用户输入更新空段落？

Question

jQuery 中的这个例子是我在纯 JavaScript 中寻找的。

这是一个在用户在文本区域中键入时更新<textarea>段落的示例。<p></p>

我的问题是如何在纯 JavaScript 中完成？

代表我的尝试看起来像这样，但它并不完全有效：

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
};

先感谢您。

亲切的问候。

Answer 1

您的段落 id 中有错字：

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

应该：

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

添加 Utkanos 的注释，JS 代码可能如下所示：

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