Question

我发现这个答案已经很有帮助，但没有回答这个问题：Append text to textarea with javascript

以从中借用为例：点击下面列表中的所有所有三个，将显示“ HelloWorldEarthlings”

<textarea id="alltext"></textarea>
<ol onclick="addText(event)">
<li>Hello</li>
<li>World</li>
<li>Earthlings</li>
</ol>
<script>
function addText(event) {
    var targ = event.target || event.srcElement;
    document.getElementById("alltext").value += targ.textContent || targ.innerText;
}
</script>

我想添加一个列表，然后将每个列表的点击区分到各自的段落中，

例如，我想单击下面每个列表中的第一个选项：

<textarea id="alltext"></textarea>
<ol onclick="addText(event)">
<li>Hello</li>
<li>Greetings</li>
<li>Salutations</li>
</ol>

<ol onclick="addText(event)">
<li>Humans!</li>
<li>Peasants?</li>
<li>Earthlings.</li>
</ol>
<script>
function addText(event) {
    var targ = event.target || event.srcElement;
    document.getElementById("alltext").value += targ.textContent || targ.innerText;
}
</script>

要以某种方式打印：

你好

人类！

edit：我想提出十个以上的清单-不仅仅是两个。

Answer 1

似乎我采用的方法与此处使用的其他方法略有不同。我选择在运行时执行所有操作，因此您无需预先计算任何内容。只需将您的数据放入页面中，它就可以正常工作了。

我看到您想要o具有任意数量的列表，因此允许这样做。另外，大概您希望每个列表中有任意数量的选项。然而，不确定的是这种控制的预期长期行为。也就是说，如果我有两个列表，我是否只能期待在框中看到两个字，还是只是继续添加最近选择的一个广告无穷大？

因此，在页面加载时，我快速检查了页面的内容，查找并计算了<OL>元素的实例。然后，在设置每个列表的属性以告诉列表索引是什么之前，我用这么多元素创建一个数组。

单击<li>时，将检索该单词，并检索该单词所在列表的索引，然后将该单词填充到我们之前创建的数组中。然后，我们要求重新绘制，在这种情况下，将数组的所有元素粘贴到屏幕上之前，每个元素之间都要用空格（''）粘在一起。

"use strict";
function byId(id){return document.getElementById(id)}
function newEl(tag){return document.createElement(tag)}
window.addEventListener('load', onWindowLoaded, false);

var wordArray;

function onWindowLoaded(evt)
{
	var orderedLists = document.querySelectorAll('ol');
	var listArray = [...orderedLists];
	wordArray = new Array(listArray.length);
	
	listArray.forEach( function(curList, index)
						{
							curList.dataset.listIndex = index;
							curList.addEventListener('click', onListClicked, false);
						}
					);
}

function onListClicked(evt)
{
	var text = evt.target.textContent;
	var arrayIndex = parseInt(this.dataset.listIndex);
	wordArray[arrayIndex] = text;
	renderText();
}

function renderText()
{
	var str = wordArray.join(" ");
	byId('output').textContent = str;
}

	<textarea id='output'></textarea>
	<ol>
		<li>Hello</li>
		<li>Greetings</li>
		<li>Salutations</li>
	</ol>
	<ol>
		<li>Humans</li>
		<li>Peasants</li>
		<li>Earthlings</li>
	</ol>

Answer 2

如果您想要文字段落：

document.getElementById("alltext").value += "\t" + (targ.textContent || targ.innerText) + "\n";

<textarea id="alltext"></textarea>
<ol onclick="addText(event)">
<li>Hello</li>
<li>Greetings</li>
<li>Salutations</li>
</ol>

<ol onclick="addText(event)">
<li>Humans!</li>
<li>Peasants?</li>
<li>Earthlings.</li>
</ol>
<script>
function addText(event) {
    var targ = event.target || event.srcElement;
    document.getElementById("alltext").value += "\t" + (targ.textContent || targ.innerText) + "\n";
}
</script>

如果需要HTML段落，可以将alltext textarea更改为div，并使用以下代码：

document.getElementById("alltext").innerHTML += "<p>" + (targ.textContent || targ.innerText) + "</p>";

<div id="alltext"></div>
<ol onclick="addText(event)">
<li>Hello</li>
<li>Greetings</li>
<li>Salutations</li>
</ol>

<ol onclick="addText(event)">
<li>Humans!</li>
<li>Peasants?</li>
<li>Earthlings.</li>
</ol>
<script>
function addText(event) {
    var targ = event.target || event.srcElement;
    document.getElementById("alltext").innerHTML += "<p>" + (targ.textContent || targ.innerText) + "</p>";
}
</script>

Answer 3

有两种可能的解决方案，您可以选择最喜欢的一种。

将所有内容附加到带有换行符的单个文本区域：

function addText(event) {
    var targ = event.target || event.srcElement;
    document.getElementById("alltext").value += String.fromCharCode(10) + String.fromCharCode(10) +  (targ.textContent || targ.innerText);
}

<textarea id="alltext"></textarea>
<ol onclick="addText(event)">
<li>Hello</li>
<li>Greetings</li>
<li>Salutations</li>
</ol>

<ol onclick="addText(event)">
<li>Humans!</li>
<li>Peasants?</li>
<li>Earthlings.</li>
</ol>

将P标签附加到Div：

var container = document.getElementById('alltext');

function addText(event) {
    var targ = event.target || event.srcElement;
    var p = document.createElement('p')
    p.innerText = targ.textContent || targ.innerText;
    container.append(p);
}

<p id="alltext"></p>
<ol onclick="addText(event)">
<li>Hello</li>
<li>Greetings</li>
<li>Salutations</li>
</ol>

<ol onclick="addText(event)">
<li>Humans!</li>
<li>Peasants?</li>
<li>Earthlings.</li>
</ol>

将文本追加到单个文本区域-按段落分隔（使用javascript）

3 个答案: