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

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

5

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