Could someone poin-out why this works (JS , .bind() )

Question

can someone point out why the next code as soon as I open the live server webpage prompts me to input the number ( the one without .bind()) while the one with bind works flawlessly?

let chooseNumber;
const poll = {
  question: ' What is your favorite programming language?',
  options: ['0 : JavaScript', '1:Python', '2: Rust', '3:C++'],
  //This generates [0,0,0,0]. More In the next section :D

  answers: new Array(4).fill(0),
  registerNewAnswer: function () {
    chooseNumber = prompt(`${this.question} \n ${this.options}`);

    if (chooseNumber >= 0 && chooseNumber < 4) {
      this.answers[chooseNumber] = this.answers[chooseNumber] + 1;
    }
    console.log(this.answers);
    console.log('Munem');
  },
};

document
  .querySelector('.poll')
  .addEventListener('click', poll.registerNewAnswer.bind(poll)); //works
//
// document
//   .querySelector('.poll')
//   .addEventListener('click', poll.registerNewAnswer());
//doesn't work

You're calling the function immediately, not saving a function reference in the listener. — Barmar, Apr 16 '21 at 17:15
As in change `.addEventListener('click', poll.registerNewAnswer())` to `.addEventListener('click', poll.registerNewAnswer)`. — Spencer Wieczorek, Apr 16 '21 at 17:23

Could someone poin-out why this works (JS , .bind() )

0 Answers0