Javascript 如何将输入从一个文本区域传递到另一个文本区域的输出？

我刚开始再次学习JS，在制作应用程序时遇到了这个问题

我无法将输入从一个textarea传递到第二个textarea（即输出）。我想在输出时使文本大写。我试图修改的代码，但我想让它没有按钮，所以它看起来更干净

我想要达到的目标：

用户在输入中写入内容 他的文本被复制到输出并改为大写字母 HTML

---

不确定JavaScript的哪一部分，但str没有定义。这是一个有效的版本

const uppercaseEl=document.getElementById'outputText' 函数更新{ 大写字母el.value=el.value.toUpperCase } 输入 输出

---

您可以订阅textarea更改事件

document.querySelector("#inputText").addEventListener("change", (event) => {
  document.querySelector("#outputText").textContent = event.target.value;
});

当该事件出现时，更改输出文本的内部文本

但更改只会在textarea失去焦点后出现，因此您可以对keyup事件做出反应，这将使其成为实时的：

document.querySelector("#inputText").addEventListener("keyup", (event) => {
  document.querySelector("#outputText").textContent = event.target.value;
});

或者你可以使用你的代码，在代码中你只是交换了边，忘记了关键字，你想要的是元素的值，而不是整个元素

let str = document.getElementById("inputText").value;
let res = str.toUpperCase();
document.getElementById("outputText").textContent = res;

使用textContent而不是innerHTML是安全的

---

我用let代替var，你也应该查一下，你的第一个赋值是无效的；变量名str始终位于左侧

var str = document.getElementById("inputText").value

您还需要.value来获取输入的值。更明确地说：

var inputTextarea = document.getElementById("inputText")
var str = inputTextarea.value

同样，您需要设置.value，而不是.innerText：

这将立即运行，但您的核心问题是，当您键入时，它不会更新，因为页面加载时代码只运行一次。因此，复制nothing的值，然后脚本停止。您需要在输入更改时再次运行它，如下所示：

var inputTextarea = document.getElementById("inputText")
var outputTextarea = document.getElementById("outputText")

function copyText () {
    var upper = inputTextarea.value.toUpperCase()
    outputTextarea.value = upper
}

inputTextarea.addEventListener('change', copyText)

---

在js的第一行中，您试图做一件非常糟糕的事情。此操作称为分配。你可以给一个变量赋值，但你正试图做相反的事情。 你想练习，但为了做到这一点，你需要先学习一些编程理论：变量、运算符、函数。。。

---

这将是一个良好的开端。不要跳过任何内容。

确定，因此您首先必须制作某种按钮，然后触发脚本运行，因此我在以下步骤中完成了此操作：

<h3>INPUT</h3>
    <textarea id="inputText" placeholder="input" cols="70" rows="10" wrap="on"></textarea>
    <button onclick="MakeUpper()">Enter</button>
<h3>OUTPUT</h3>
    <textarea id="outputText" placeholder="output" cols="70" rows="10" wrap="on" readonly></textarea>

---

希望这解决了您的问题，也为任何错误的代码格式感到抱歉，因为这是我第一次在网站上回答问题

谢谢，现在我意识到我的电子应用程序中有两行代码，使脚本变得无用。我删除了它们，现在每个脚本都可以工作了。。。是的，谢谢。我有一些编程知识。上面包含的JS代码只是我在一分钟的压力下完成的。这很糟糕，我知道它永远不会起作用。我不小心用git删除了我以前的文件，我只能这么做。对不起。请编辑你的问题。这很有意义，因为人们知道我试图从w3复制代码，他们得到了一般的想法。这不是后期操作吗？你的伪js代码看起来很糟糕。我认为这是人们投票反对它的主要原因。

var outputTextarea = document.getElementById("outputText")
outputTextarea.value = str

var inputTextarea = document.getElementById("inputText")
var outputTextarea = document.getElementById("outputText")

function copyText () {
    var upper = inputTextarea.value.toUpperCase()
    outputTextarea.value = upper
}

inputTextarea.addEventListener('change', copyText)

<h3>INPUT</h3>
    <textarea id="inputText" placeholder="input" cols="70" rows="10" wrap="on"></textarea>
    <button onclick="MakeUpper()">Enter</button>
<h3>OUTPUT</h3>
    <textarea id="outputText" placeholder="output" cols="70" rows="10" wrap="on" readonly></textarea>

function MakeUpper() {
        var upperCase = document.getElementById("inputText").value;
        var upperCase = upperCase.toUpperCase();
        document.getElementById("outputText").innerHTML = upperCase;
    }