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

Question

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

我无法弄清楚为什么我不能将两个文本区域连接成一个段落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”标记时，它不起作用。 我认为这可能与使用“ .value”的document.getElementById（...）有关吗？ 也许我应该使用其他东西？

Answer 1

result1没有value属性。 这不是字段，而是HTMLParagraphElement 。 请改用result1.innerHTML 。

当然，您可能希望HTML转义文本区域的内容，以免意外破坏自己的页面，在这种情况下，应使用result1.textContent 。

Answer 2

您没有正确设置'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>