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

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

我不能将输入从一个文本区域传递到第二个文本区域，这是输出。我想在输出时将文本大写。我试图修改代码从w3，但我想使它没有按钮，所以它看起来更干净。

我想要达到的目标:

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

<h3>INPUT</h3>
<textarea id="inputText" placeholder="input" cols="70" rows="10" wrap="on"></textarea>
<h3>OUTPUT</h3>
<textarea id="outputText" placeholder="output" cols="70" rows="10" wrap="on" readonly></textarea>

document.getElementById("inputText") = str;
var res = str.toUpperCase();
document.getElementById("outputText").innerHTML = res;

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

const uppercaseEl = document.getElementById('outputText')
function update(el) {
uppercaseEl.value = el.value.toUpperCase()
}

<h3>INPUT</h3>
<textarea id="inputText" oninput="update(this)" placeholder="input" cols="70" rows="10" wrap="on"></textarea>
<h3>OUTPUT</h3>
<textarea id="outputText" placeholder="output" cols="70" rows="10" wrap="on" readonly></textarea>

首先你需要创建一个按钮来触发脚本的运行我在下面这样做了:

<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;
}

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

您可以订阅textarea更改事件

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

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

更改只会在文本区失去焦点后出现，因此您可以对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:

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)

在你的js的第一行，你试图做一件非常糟糕的事情。这个操作称为赋值。你可以给一个变量赋值，但你是在试图做相反的事情。你想要实践，但为了做到这一点，你需要先学习一些编程理论:变量、运算符、函数……https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web这将是一个好的开始。不要跳过任何东西

相关内容

最新更新

热门标签：