title: extract an element from javascript to write in other part of the html page
body: <p>I try to extract an element (display the countdown) included inside this script. It could be across a new function.
  What is the process. <code>charsLen</code> is the function to extract and can be call across a new div id
  I am bad in <code>JS</code>.</p>
  <p>Thank you.</p>
  <p><code>HTML</code> and <code>JS</code> code:</p>
  <p>In this case the countdown is just displayed under the textarea</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;p&gt;With &lt;code&gt;maxChars&lt;/code&gt; property defined:&lt;/p&gt;
                      &lt;textarea class="form-control countdown" rows="6"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
          &lt;script&gt;
          /*jslint browser: true*/
          /*global define, module, exports*/
          (function (root, factory) {
              "use strict";
              if (typeof define === 'function' &amp;&amp; define.amd) {
                  define([], factory);
              } else if (typeof exports === 'object') {
                  module.exports = factory();
              } else {
                  root.VCountdown = factory();
              }
          }(this, function () {
              "use strict";
      
              var VCountdown = function (options) {
                  if (!this || !(this instanceof VCountdown)) {
                      return new VCountdown(options);
                  }
      
                  if (!options) {
                      options = {};
                  }
      
                  if (!options.target) {
                      throw 'Provide a target to count characters';
                  }
      
                  this.target   = document.querySelector(options.target);
                  this.maxChars = options.maxChars || 140;
      
                  this.countdown();
              };
      
              VCountdown.prototype = {
                  hasClass: function (el, name) {
                      return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className);
                  },
                  addClass: function (el, name) {
                      if (!this.hasClass(el, name)) {
                          el.className += (el.className ? ' ' : '') + name;
                      }
                  },
                  removeClass: function (el, name) {
                      if (this.hasClass(el, name)) {
                          el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, '');
                      }
                  },
                  createEls: function (name, props) {
                      var el = document.createElement(name), p;
                      for (p in props) {
                          if (props.hasOwnProperty(p)) {
                              el[p] = props[p];
                          }
                      }
                      return el;
                  },
                  insertAfter: function (referenceNode, newNode) {
                      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
                  },
                  update: function () {
                      var target = this.target,
                          currentCount = target.value.length,
                          remaining    = this.maxChars - currentCount;
      
                      if (remaining &gt; 10) {
                          this.removeClass(target.nextElementSibling, 'warn');
                      } else {
                          this.addClass(target.nextElementSibling, 'warn');
                      }
      
                      target.nextElementSibling.innerHTML = remaining;
                  },
                  setMaxChars: function () {
                      this.target.setAttribute('maxlength', this.maxChars);
                  },
      
      /*display the count down*/
                  charsLen: function () {
                      var span = this.createEls('span', {className: 'chars-length'});
                      span.innerHTML = this.maxChars;
      
                      this.insertAfter(this.target, span);
      
                      this.update();
                  },
                  countdown: function () {
                      this.setMaxChars();
                      this.charsLen();
      
                      this.target.addEventListener('keyup', this.update.bind(this), false);
                  }
              };
      
              return VCountdown;
          }));
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>to display the element</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      VCountdown({
          target: '.countdown',
          maxChars: &lt;?php echo $min_caracters_to_write; ?&gt;
      });
  &lt;/script&gt;
  </code></pre>
  <p>I tried this inside the js, not work and call by</p>
  <pre><code>&lt;div id=&quot;decreaseCount&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>not work</p>
  <pre><code>  countdown: function () {
              this.setMaxChars();
              //this.charsLen();
  
              //this.target.addEventListener('keyup', this.update.bind(this), false);
          }
          decreaseCount: function () {
              this.charsLen();
  
              this.target.addEventListener('keyup', this.update.bind(this), false);
          }
  </code></pre>