Javascript function being called too many times

Question

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?

'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();
})();

.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;
}

<section class="container">
<span class="view-box"></span>
<button class="button">Click!</button>
</section>

Answer 1

You are adding an eventListener everytime you click on the button.

Just do it this way.

bind the button with a click event when you first create the button.

'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;
    /* Place it here */
      this.button.addEventListener('click',         changeValue.bind(this));
      function changeValue() {
      this.num ++;
      this.render();
      }
};

NumView.prototype.render = function render() {
      this.element.innerHTML = this.num;
      /*Remove from here*/
      /*
      this.button.addEventListener('click',         changeValue.bind(this));
      function changeValue() {
      this.num ++;
      this.render();
      }
      //This is being called multiple times. 1 + 2 +3 +4+..
      */
};

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();
})();

.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;
}

<section class="container">
<span class="view-box"></span>
<button class="button">Click!</button>
</section>