如何将两个文本区域连接成一个段落

how to concatenate two text areas into one paragraph

本文关键字：连接 段落 一个 区域 两个 文本      更新时间：2023-09-26

我试图将两个文本区域连接到一个段落中。用户可以在这两个文本区域输入数据，然后按下按钮，结果就会显示在一个段落中。

我不明白为什么我不能让两个文本区域连接到一个段落html元素。我确实发现，我可以用相同的功能有结果显示在一个额外的文本区域，但当我切换元素回到段落…"p"而不是"textarea"，我的代码不再正常工作。

javascript: 

function concatenate(){
    document.getElementById("result1").value =
    document.getElementById("text_area_1").value + " " +
    document.getElementById("text_area_2").value;
}
html: 

<div id="requirement #1">
    <h1> Requirement #1</h1>
    <textarea id="text_area_1"></textarea>
    <textarea id="text_area_2"></textarea>
    <button type="button" id="button1" onclick="concatenate()">concatenate</button>
    <p id="result1"></p
</div>

我不知道为什么如果我将"p"更改为"textarea"元素，我的功能工作，但当我使用"p"标签时，它不起作用。我认为这可能与document.getElementById(…)使用"。价值"?也许我应该用别的东西?

result1没有value属性。它不是一个字段，它是一个html分段元素。用result1.innerHTML代替。

当然，您可能希望对文本区的内容进行HTML转义，这样您就不会意外地破坏您自己的页面，在这种情况下，您应该使用result1.textContent。

您没有正确设置" result1 "的值。

试试这个:

function concatenate(){
    //I modified this line, changed .value for .innerHTML
    document.getElementById("result1").innerHTML =
    document.getElementById("text_area_1").value + " " +
    document.getElementById("text_area_2").value;
}
<div id="requirement #1">
    <h1> Requirement #1</h1>
    <textarea id="text_area_1"></textarea>
    <textarea id="text_area_2"></textarea>
    <button type="button" id="button1" onclick="concatenate()">concatenate</button>
    <p id="result1"></p
</div>

相关文章：