Solution 1 :

If I’m understanding your problem correctly would this achieve the desired result

const { get, set } = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
const t = document.getElementById('txt');
Object.defineProperty(t, 'value', {
  get() {
  set(newVal) {
    console.log('Input changed');
    return, newVal);

This is a modified version of

Solution 2 :

is you js inside a fn that got triggered when the dom is ready? like described here?
Vanilla JavaScript equivalent of jQuery’s $.ready() – how to call a function when the page/DOM is ready for it

Solution 3 :

As I’m understanding your question, you want some way to get the value of <textarea> when is changed. So, basically, in that case, we use onchange event to find change.

So what I mean is when you need to get the value of any input field you could use this

Here are the official docs:
Event API

The snippet below uses the keydown event:

const input = document.querySelector('#input');
const output = document.querySelector('#output');
input.addEventListener('keydown', updateValue);

function updateValue(event) {
    let value =;
    output.innerHTML = value;
    if (value.length < 5) {
        console.log('Please enter a name with at least 5 letters');
<!DOCTYPE html>

<h1>The textarea element</h1>

  <textarea id="input" name="w3review" rows="4" cols="50">input you text here</textarea>
<p id="output"></p>

Problem :

My website receives some text through API call and that value is displayed on textarea on the page.
I want to run a function to perform some tasks after the value is set to textarea. But I don’t see any event triggering when setting textarea value through program.
I cannot find any related questions, solutions or articles regarding this.

Below is the demonstration of the problem I am facing.

txt.onchange = () => {
  alert("textarea changed (onchange event)");

txt.onkeyup = () => {
  alert("textarea changed (onkeyup event)");

txt.onkeydown = () => {
  alert("textarea changed (onkeydown event)");

txt.oninput = () => {
  alert("textarea changed (oninput event)");

changetxt.onclick = () => {
  txt.value = "value is set programmetically.";
<textarea id="txt" rows="10"></textarea>
<button id="changetxt">Update Textarea</button>

I want some way to detect textarea value is changed through program.


Comment posted by Michael M.

Why can’t you put the code in your

Comment posted by Bibek Oli

@MichaelM. can you show example?

Comment posted by Michael M.

Let’s say you have a function you want to run, called

Comment posted by Michael M.

This is the only answer that actually solves the problem.

Comment posted by Michael M.

This does not answer the question. OP wants to run code when the

Comment posted by Marco

ut the hooks works only when dom is ready

Comment posted by Michael M.

The problem is not that the JS is being before the DOM is ready. The problem is that event listeners are not called when code is changed programmatically. You have a fundamental misunderstanding.

Comment posted by Marco

code changed? i understood that the CONTENT of the textarea changed – so dom elements didn’t changed – lets see what the author thinks about the answers

Comment posted by Michael M.

Only use header text (large text) or bold when it is necessary and adds meaning to your post. Not for your entire post.