.Prototype. does not work with eventListener

I want to make my code in Prototype style coding. But I ran into difficulties - for some reasons onclick function does not want to run.

Can someone to explain me where my problem is?

    function Voter(options) {
      this.elem = options.elem;
      this.voteElem = this.elem.querySelector('.vote');
    }

    Voter.prototype.onmousedown = function() { 
        return false;
    };

    Voter.prototype.onclick = function(event) { // this is my problem
      if (this.elem.closest('.down')) {
        this.voteDecrease();

      } else if (this.elem.closest('.up')) {
        this.voteIncrease();
      }
    };

    Voter.prototype.voteDecrease = function() {
      this.voteElem.innerHTML = +this.voteElem.innerHTML - 1;
      console.log(this.voteElem);
    }

    Voter.prototype.voteIncrease = function() {
      this.voteElem.innerHTML = +this.voteElem.innerHTML + 1;
    }

    Voter.prototype.setVote = function(vote, voteElem) {
        this.voteElem.innerHTML = +vote;
      };

    var voter = new Voter({
      elem: document.getElementById('voter')
    });

    voter.setVote(1);
    voter.onclick();

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .down, .up {
      color:  blue;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div id="voter" class="voter">
    <span class="down">—</span>
    <span class="vote">0</span>
    <span class="up">+</span>
  </div>

  <script>
  </script>
</body>
</html>

Solution

closestfunction gets the ancestor, not your siblings.
You need to bind the onclick event to your previousElementSibling and nextElementSibling.
Use this.voteElem to get your siblings.

Look at this code snippet

function Voter(options) {
  this.elem = options.elem;
  this.voteElem = this.elem.querySelector('.vote');
}

Voter.prototype.onmousedown = function() {
  return false;
};

Voter.prototype.onclick = function(event) {
  var self = this;
  
  this.voteElem.previousElementSibling.onclick = function() {
    self.voteDecrease();
  };

  this.voteElem.nextElementSibling.onclick = function() {
    self.voteIncrease();
  };
};

Voter.prototype.voteDecrease = function() {
  this.voteElem.innerHTML = +this.voteElem.innerHTML - 1;
}

Voter.prototype.voteIncrease = function() {
  this.voteElem.innerHTML = +this.voteElem.innerHTML + 1;
}

Voter.prototype.setVote = function(vote, voteElem) {
  this.voteElem.innerHTML = +vote;
};

var voter = new Voter({
  elem: document.getElementById('voter')
});

voter.setVote(1);
voter.onclick();

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .down,
    .up {
      color: blue;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div id="voter" class="voter">
    <span class="down" id='down'>—</span>
    <span class="vote">0</span>
    <span class="up" id='up'>+</span>
  </div>

  <script>
  </script>
</body>

</html>

See? your prototype logic is working now.

.Prototype. does not work with eventListener

Look at this code snippet

Resources