我正在尝试结合2种不同的JS代码，以便它们都能正常工作并执行所需的任务。
代码1：JS
let translator = {
"you": "yaseelf",
"I": "meseelf",
"quick": "fast",
"the": "dee"
};
var button = document.querySelector("#button_1");
var input = document.querySelector("#input");
var output = document.querySelector("#output_main");
button.addEventListener("click", () => {
let words = input.value.split(' ');
let translated = words.map(word => translator[word] || word);
output.innerHTML = translated.join(' ');
})
代码1：HTML
<input id="input" type="text" value="Lets go to the park" />
<button id="button_1">translate</button>
<textarea id="output_main"></textarea>
如果将输入字段的文本替换为数组中描述的单词，例如将“ quick”替换为“ fast”，则上述代码可以正常工作。
当您按下翻译按钮时，将执行以上代码。
我要实现的是，当在输入字段中输入文本时，其输出应在RUNTIME中显示在textarea中，并且也应完成上述代码中的文本替换。因此，无需按“翻译”按钮即可替换在textarea中输入的文本和输出
例：
在输入字段中，用户输入“ The Quick Brown Fox Jumps Over the Lazy Dog”，应在运行时将其替换并显示在输出字段中，因此输出（无需按下按钮）应为：
“快速迪布朗狐狸跳过懒狗”
到目前为止，我已经使用以下代码在不同的文本字段上实现了运行时文本输出：
JS：
function enterAmt(ev) {
document.getElementById('amt2').value = ev.value;
}
HTML：
Amount 1<input type="text" id="input" name="amtname" size="5" maxlength="7" onkeyup="enterAmt(this)"><br><br>
Amount 2<textarea name="amtname" size="5" maxlength="7" value="" id="amt2"></textarea>
我仍然是一个新手，因此无法弄清楚如何使这两个代码一起工作，但是，它们都单独执行功能，现在只需要帮助就可以将它们组合在一起。
简而言之，我希望在输入中替换输入的文本（用我上面的代码1所描述的单词）并在运行时显示在textarea中，即无需按按钮或等待。
您可以使用输入事件。
let translator = {
"you": "yaseelf",
"I": "meseelf",
"quick": "fast",
"the": "dee"
};
var input = document.querySelector("#input");
var output = document.querySelector("#output_main");
input.addEventListener("input", () => {
let words = input.value.split(' ');
let translated = words.map(word => translator[word] || word);
output.value = translated.join(' ');
})<input id="input" type="text" value="Lets go to the park" />
<textarea id="output_main"></textarea>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句