How do I add a prototype function to an event listener?

How do I add a prototype function to an event listener?
0.0 0

#1

I made a prototype function, game.chooseSymbol(symbol), and I want it to activate with a click event. when I use document.querySelector(’.something’).addEventListener(‘click’, game.chooseSymbol(symbol), I get an error in the console saying that this is not a function. In stackoverflow I found that you are supposed to add .bind to your function to make this work, but I tried adding .bind to game.chooseSymbol and got an error that it wasn’t a function, not sure if I was using it correctly though. I would appreciate any help with this. Here are links to my code : https://pastebin.com/KpCR6DVg https://codepen.io/icewizard/pen/XEMmGZ

'use strict'
 
function game (player) {
  this.player = null;
  this.computer = null;
  this.playerMoves = [];
  this.computerMoves = [];
  this.squares = document.querySelector(this.id);
  this.winningCombos = [
    [1, 2, 3],[4, 5, 6],[7, 8, 9],
    [1, 4, 7],[2, 5, 8],[3, 6, 9],
    [1, 5, 9],[3, 5, 7]
  ];
}
 
game.prototype.chooseSymbol = (symbol) => {
    player = symbol;
    //choose computers symbol
    player = 'x' ? computer = 'o' : computer = 'x';
 
    console.log(player + computer);
}
 
document.querySelector('#playx').addEventListener('click', game.chooseSymbol('x'));
 
document.querySelector('#playo').addEventListener('click', game.chooseSymbol('o'));

#2

You have several problems here.

#1) There is no such element with id=“playx” or id=“playo”, so your querySelectors are not going to be able to add event handlers.

#2) You do not seem to understand how to use the prototype function. You need to create a new instance of the game function and assign it to a variable so you can make calls to the chooseSymbol function.

For example:

var newGame = new game();

document.querySelector('#playx').addEventListener('click', function() {       
  newGame.chooseSymbol('x');
});

document.querySelector('#playo').addEventListener('click', function() {
  newGame.chooseSymbol('o');
});

You will notice above how you properly would call the newGame.chooseSymbol function.

#3) Inside your prototype function, you have the following;

game.prototype.chooseSymbol = (symbol) => {
    player = symbol;
    //choose computers symbol
    player = 'x' ? computer = 'o' : computer = 'x';
    console.log(player + computer);
}

You must declare player if you want to assign it the value of symbol. Did you mean for player to be a local variable to the prototype function or did you actual mean this.player? Also, the following line errors out, because computer has not been declared. If you had declared computer, then the following code will always assign both player and computer ‘o’.

    player = 'x' ? computer = 'o' : computer = 'x';

Why? Because it is the equivalent of the following:

if ('x') {
  player = computer = 'o';
}
else {
  player = computer = 'x';
}

Since ‘x’ is a non-empty string it is a truthy value so the player = computer = ‘o’ gets executed. Assignments go right to left, so computer gets assign ‘o’ and then player gets assign the value computer has which is ‘o’.

I think you were trying to write what I have written below. Don’t click on the blur until you have tried to figure it out yourself.

game.prototype.chooseSymbol = (symbol) => {
    this.player = symbol;
    this.computer = symbol === 'x' ? 'o' : 'x';
}

#3

thank you this explains a lot, and I think I’ve got it now.

'use strict'

function game () {
  this.player = null;
  this.computer = null;
  this.playerMoves = [];
  this.computerMoves = [];
  this.squares = document.querySelector(this.id);
  this.winningCombos = [
    [1, 2, 3],[4, 5, 6],[7, 8, 9],
    [1, 4, 7],[2, 5, 8],[3, 6, 9],
    [1, 5, 9],[3, 5, 7]
  ];
}

game.prototype.chooseSymbol = (symbol) => {
    this.player = symbol;
    //choose computers symbol
    this.player === 'x' ? this.computer = 'o' : this.computer = 'x';

    console.log(player + computer);
}

const ticTacToe = new game();

document.querySelector('#playx').addEventListener('click', () => {
    ticTacToe.chooseSymbol('x')
});

document.querySelector('#playo').addEventListener('click', () => {
    ticTacToe.chooseSymbol('o')
});


I’m using this now and getting no errors, thanks.


#4

See my blurred solution. Yours does work, but you might as well use an if/else statement to make it more readable. Ternary operators are intended to be used when you want to assign a value based on a condition and not just a shorthand if/else statement. With your solution, you are repeating this.computer =


#5

thanks I’ll try that, it does look cleaner.