如何使用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

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