title: How to detect if textarea content has changed with JavaScript
body: <p>html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;Document&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;textarea name=&quot;&quot; id=&quot;a&quot; cols=&quot;30&quot; rows=&quot;10&quot;&gt;&lt;/textarea&gt;
      &lt;textarea name=&quot;&quot; id=&quot;b&quot; cols=&quot;30&quot; rows=&quot;10&quot;&gt;&lt;/textarea&gt;
      &lt;textarea name=&quot;&quot; id=&quot;c&quot; cols=&quot;30&quot; rows=&quot;10&quot;&gt;&lt;/textarea&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>js</p>
  <pre><code>const first = document.getElementById(&quot;a&quot;);
  const second = document.getElementById(&quot;b&quot;);
  const third = document.getElementById(&quot;c&quot;);
  
  first.addEventListener(&quot;input&quot;, () =&gt; {
    second.value = first.value;
  });
  
  second.addEventListener(&quot;change&quot;, () =&gt; {
    console.log(&quot;work!!&quot;)
    third.value = second.value;
  });
  
  
  </code></pre>
  <p>codepen -&gt; <a href="https://codepen.io/dmgpgdmgpg/pen/NWRxVbg?editors=1111" rel="nofollow noreferrer">https://codepen.io/dmgpgdmgpg/pen/NWRxVbg?editors=1111</a></p>
  <p>first -&gt; second is okay
  but second -&gt; third is not work</p>
  <p>because The change event is fired for input, select, and textarea elements when a change to the element's value is committed <em><strong>by the user.</strong></em> (MDN)</p>
  <p>how can detect change of second textarea after change of first textarea?</p>
  <p>i want pass first to second, second to third (not first -&gt; third)</p>