如何使用textarea更改段落

Question

所以我是 Web 开发的新手，我想创建可以使用 textarea 更改其 textContent 的段落。 我的意思是：如果我会写“Hello World！” 在textarea中，我希望段落的内容变成文本，写在文本框中。 当然使用 JavaScript。 但我不知道该怎么做。 我有一些尝试，但都失败了。 这是我的 HTML，我需要 JavaScript Tutor...

<p class="test-text"></p>

<textarea class="tarea" name="textarea" cols="30" rows="10"></textarea>

和我创建的变量：

var paragraph = document.querySelector('.test-text');
var tarea = document.querySelector('.tarea');

你们能帮我吗:D

Answer 1

我会给两者一个 id，这样你就可以更容易地获得它们。 使用类名可能会起作用，但如果您想创建该类的另一个元素，它将不起作用。 如果您只使用类来标识元素，则无论如何都应该使用 id，因为这是它们的用途。 然后它看起来像这样：

<p class="test-text" id="myParagraph"></p>

<textarea class="tarea" id="myTextarea" name="textarea" cols="30" rows="10"></textarea>

然后你可以简单地设置 textArea 与这个：

var text = document.getElementById("myParagraph").textContent;
document.getElementById('myTextarea').value = text;

请注意，如果您的段落标记中没有其他元素，则 textContent 仅按预期工作。 否则，底层元素的 textContent 将包含在段落元素的 textContent 中。

Answer 2

首先，您需要获取元素：

HTML:
<p id="text" class="test-text"></p>

<textarea id="text-area" class="tarea" name="textarea" cols="30" rows="10"></textarea>

JS:
var paragraph = document.querySelector('#text');
var tarea = document.querySelector('#text-area');

我为元素添加了 id

然后你需要在textarea中添加一个事件监听器：

tarea.addEventListener('input', updateValue);

现在您可以创建一个函数来更新段落：

function updateValue(e) {
  paragraph.textContent = e.target.value;
}

请注意，当您在 textarea 中键入内容时将执行 updateValue

您可以查看此以获取更多信息