CODEWITHSUNDEEP
htmlangulartypescript
Rpgstupid920
Rpgstupid920

Reputation: 43

How to fix Uncaught ReferenceError: play is not defined at HTMLButtonElement.onclick

I'm trying to write a rock, paper, scissors game in angular and I can't seem to get the onclick method of play to work.

I've heard it was a scoping problem but cant seem to understand/apply that in what i have written.

Here is my html code

<button class="play rock" type="button" onclick="play('rock')"></button>

Here is my ts script

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-rps-game',
  templateUrl: './rps-game.component.html',
  styleUrls: ['./rps-game.component.scss']
})
export class RpsGameComponent implements OnInit {

  loses: number;
  wins: number;

  constructor() { }

  ngOnInit() {
  }
  play(userChoice: string) {
    document.getElementById('player').innerHTML = '';
    document.getElementById('opponent').innerHTML = '';
    document.getElementById('results').innerHTML = '';

    const computerChoicer = Math.random();
    let computerChoice = '';
    if (computerChoicer < 0.34) {
      computerChoice = 'rock';
    } else if (computerChoicer <= 0.67) {
      computerChoice = 'paper';
    } else {
      computerChoice = 'scissors';
    }

    const winner = this.compare(userChoice, computerChoice);
    document.getElementById('results').innerHTML = winner;
    document.getElementById('wins').innerHTML = String(this.wins);
    document.getElementById('loses').innerHTML = String(this.loses);
  }

  compare(choice1, choice2) {
    if (choice1 === choice2) {
      return 'The result is a tie!';
    } else if (choice1 === 'rock') {
      if (choice2 === 'scissors') {
        this.wins++;
        return 'rock wins. rock on.';
      } else {
        this.loses++;
        return 'sorry. paper wins.';
      }
    } else if (choice1 === 'paper') {
      if (choice2 === 'rock') {
        this.wins++;
        return 'paper wins';
      } else {
        this.loses++;
        return 'sorry. scissors win.';
      }
    } else if (choice1 === 'scissors') {
      if (choice2 === 'rock') {
        this.loses++;
        return 'sorry. rock wins';
      } else {
        this.wins++;
        return 'scissors win';
      }
    }
  }

}

Uncaught ReferenceError: play is not defined at HTMLButtonElement.onclick ((index):1)

Upvotes: 4

Views: 5338

Answers (2)

Chris Barr
Chris Barr

Reputation: 33992

onclick="play('rock') is not something that Angular knows about. use (click)="play('rock')" instead

<button class="play rock" type="button" (click)="play('rock')"></button>

You might want to read up on angular a bit more: https://angular.io/guide/component-interaction

Basically though:

  • Square bracket bindings like <button [title]="myTitle"> are an INPUT binding, and it will bind the myTitle property on your class to the title HTML attribute. This is a one-way binding and the myTitle property cannot be updated from the button.
  • Parenthesis bindngs like <button (click)="someFn()"> are an OUTPUT binding and will (in this case) run the someFn() function when the click even occurs.

These two can also be combined for two-way bindings on some components, but they need to be built in a special way to handle this.

Upvotes: 5

Tyler Carr
Tyler Carr

Reputation: 1

You have to use a [click] or click, as onclick isn't defined by Angular and wouldn't be recognized to take the specific method you defined in your Angular component.

So, it should look like this instead: 

<button class="play rock" type="button" click="play('rock')"></button>

Should fix it

Upvotes: -1

Related Questions