title: Javascript function being called too many times
body: <p>I have a function that supposed to increment a number by one
  on every button click.The function works correctly only the first time it's called and then the number increases greatly because the function being called too many times. 
  Can someone please explain what's happening and how can I fix it following the same pattern as I have already?</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-js lang-js prettyprint-override"><code>'use strict';
  var button = document.getElementsByClassName('button')[0],
      targetElement = document.getElementsByClassName('view-box')[0];
  
  var NumView = function NumView(element, button) {
      this.element = element;
      this.button = button;
  };
  
  NumView.prototype.render = function render() {
        this.element.innerHTML = this.num;
        this.button.addEventListener('click', changeValue.bind(this));
        function changeValue() {
        this.num ++;
        this.render();
        }
  };
  
  var NumController = function NumController(numView) {
      this.numView = numView;
  };
  
  NumController.prototype.initialize = function initialize() {
      this.onLoadShowNum();
  };
  
  NumController.prototype.onLoadShowNum = function onLoadShowNum() {
      this.numView.num = 0;
      this.numView.render();
  };
  
  (function initialize() {
      var view = new NumView(targetElement, button),
          controller = new NumController(view);
      controller.initialize();
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      width: 100%;
      background: silver;
      text-align: center;
  }
  
  .view-box {
      border: 5px solid red;
      padding: 5px;
      background: white;
  }
  
  .button {
      line-height: 2.4;
      margin: 25px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="container"&gt;
  &lt;span class="view-box"&gt;&lt;/span&gt;
  &lt;button class="button"&gt;Click!&lt;/button&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>