如何用textarea更改段落

问题描述

因此，我是Web开发领域的新手，我想创建一个可以通过textarea更改其textContent的段落。我的意思是：如果我要写“ Hello World！”在textarea中，我希望将段落的内容更改为文本，即写在文本框中。当然使用JavaScript。但我不知道该怎么做。我做了一些尝试，但都失败了。 这是我的HTML，我需要JavaScript导师...

src

和我创建的变量：

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

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

你们可以帮我吗：D

解决方法

我会同时给两个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中。

,

首先，您需要获取元素：

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

然后，您需要向文本区域添加事件侦听器：

tarea.addEventListener('input',updateValue);

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

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

请注意，当您在文本区域中键入内容时，将执行updateValue

您可以检查this以获得更多信息