If you want to change the third textarea input after each input from the second one, the same way the first one works, try this:
<textarea name="" id="a" cols="30" rows="10"></textarea>
<textarea name="" id="b" cols="30" rows="10" oninput="changeText()"></textarea>
<textarea name="" id="c" cols="30" rows="10"></textarea>
oninput event:
This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on elements. source
edit:
if the you need to detect a change that JS triggered and not the user, might be the best way to just add event dispatch
const first = document.getElementById("a");
const second = document.getElementById("b");
const third = document.getElementById("c");
const event = new Event('input', {
bubbles: true,
cancelable: true,
});
first.addEventListener("input", () => {
second.value = first.value;
second.dispatchEvent(event);
});
second.addEventListener ('input', () => {
third.value = second.value;
});
I did not find any way to fire an event from textarea on change that was not from the user himself except triggering it manually
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<textarea name="" id="a" cols="30" rows="10"></textarea>
<textarea name="" id="b" cols="30" rows="10"></textarea>
<textarea name="" id="c" cols="30" rows="10"></textarea>
</body>
</html>
js
const first = document.getElementById("a");
const second = document.getElementById("b");
const third = document.getElementById("c");
first.addEventListener("input", () => {
second.value = first.value;
});
second.addEventListener("change", () => {
console.log("work!!")
third.value = second.value;
});
codepen -> https://codepen.io/dmgpgdmgpg/pen/NWRxVbg?editors=1111
first -> second is okay
but second -> third is not work
because The change event is fired for input, select, and textarea elements when a change to the element’s value is committed by the user. (MDN)
how can detect change of second textarea after change of first textarea?
i want pass first to second, second to third (not first -> third)
not work….. becuase input event is by ‘user’. but ‘second.value = first.value’ is not by user…. if i typing text on second textarea, it will work… but that’s not what I want to do
So I misunderstood the question, wouldn’t it be easier to just change second and third the same way? or you specifically want to change the third textarea on any change on the second one?
sorry to late. I want ‘monitor’ if second textarea value is change. The change includes both changes by users and changes by JS.
I am making a multi-translator project. The first textarea detects input (language A) and requests the text from the api to receive the translated text (language B).
Put the translated text into the second textarea and the second textarea should detect it.
