title: How to limit textarea maxlength when adding data on button click event?
body: <p>I am performing the following steps:
  1- A textarea whose maxlength is 50.
  2- A button on click of which text is getting appended to textarea.</p>
  
  <blockquote>
    <p>Issue: Maxlength validation does not work if keep clicking the button.
    Don't want to put any check of maxlength on button click.</p>
  </blockquote>
  
  <p>Is there any textArea eventlistener I can add to put a check if adding data on button click event.</p>
  
  <p>
  </p>
  
  <pre><code>&lt;body&gt;
      &lt;textarea id="test" rows="4" cols="50" maxlength="50"&gt;
      &lt;/textarea&gt;
  
      &lt;button onclick="appendData()"&gt; Click &lt;/button&gt;
  
      &lt;script type="text/javascript"&gt;
          document.addEventListener("DOMContentLoaded", function(event) { 
              var txtArea = document.querySelector('textarea');
          });
  
          document.getElementById('test').addEventListener('change', function(event) {
              alert('inside event listener of textarea 2')
          })
  
          function appendData(){
              document.querySelector('textarea').value += "hello";
          }
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>