如何在textarea中以日志形式追加显示函数执行结果（新结果在上）

我明白你的需求啦——每次点击按钮执行函数后，希望把新结果加到textarea的最上方，同时保留之前的日志内容，而不是直接覆盖掉。

原来的代码问题在于每次执行函数时，都直接用innerHTML把新内容覆盖了整个textarea。要实现叠加效果，我们需要先获取textarea里已有的内容，然后把新内容放在前面，再拼接起来赋值回去。另外，对于textarea这种表单元素，用value属性来操作内容会比innerHTML更标准哦。

下面是修改后的完整代码：

<!DOCTYPE html>
<html>
<body>
<!-- 先点击'myFunction()'再点击'myFunction2()'，预期结果为：Function2 Function1 -->
<textarea id="myTextarea"></textarea>
<br>
<button type="button" onclick="myFunction()">Try it</button>
<button type="button" onclick="myFunction2()">Try it</button>
<script>
function myFunction() {
  var x = "Function1";
  // 获取textarea当前内容
  var currentContent = document.getElementById("myTextarea").value;
  // 新内容在前，拼接原有内容（这里用空格分隔，也可以换成\n实现换行）
  document.getElementById("myTextarea").value = x + " " + currentContent;
}
function myFunction2() {
  var z = "Function2";
  var currentContent = document.getElementById("myTextarea").value;
  document.getElementById("myTextarea").value = z + " " + currentContent;
}
</script>
</body>
</html>

关键修改点说明： #

• 每次执行函数时，先通过value获取textarea的现有内容，而不是直接覆盖
• 将新生成的文本放在前面，再和原有内容拼接（如果希望每条日志单独一行，可以把空格换成\n，比如z + "\n" + currentContent）
• 使用value属性操作textarea内容，这是表单元素的标准操作方式，比innerHTML更可靠

这样操作后，不管你点击哪个按钮多少次，新的结果都会显示在最上方，之前的日志也会保留下来啦～

内容的提问来源于stack exchange，提问作者Z29