CODEWITHSUNDEEP
javascripteventsprototype
Sviat Kuzhelev
Sviat Kuzhelev

Reputation: 1788

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

Upvotes: 0

Views: 30

Answers (2)

Ele
Ele

Reputation: 33726

  • 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.

Resources

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138257

You might want to listen for the click events of the closest up/down, one could change the constructor to:

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

  this.elem.closest(".up").onclick = () => this.voteIncrease();
  this.elem.closest(".down").onclick = () => this.voteDecrease();
}

For shure you can add that into an extra method, but i dont see a need for that.

Upvotes: 1

Related Questions