如何修复Uncaught ReferenceError:在HTMLButtonElement.onclick中未定义播放 [英] How to fix Uncaught ReferenceError: play is not defined at HTMLButtonElement.onclick

问题描述

我正在尝试用角度编写岩石，纸张，剪刀游戏，但似乎无法使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.

这是我的html代码

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

这是我的ts脚本

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';
      }
    }
  }

}

未捕获的ReferenceError:播放未定义在HTMLButtonElement.onclick((index :: 1)

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

推荐答案

onclick ="play('rock')不是Angular所了解的.play('rock')"代替

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>

您可能还想了解有关angular的更多信息: https://angular.io/guide/component-interaction

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

基本上是:

• 方括号绑定(例如< button [title] ="myTitle"> )是INPUT绑定，它将类的 myTitle属性绑定到title HTML属性.这是一种单向绑定，并且无法通过按钮更新 myTitle`属性.
• 像这样的肢体绑定绑定是OUTPUT绑定，并且在这种情况下，甚至在发生点击"时，(在这种情况下)将运行 someFn()函数.

• Square bracket bindings like <button [title]="myTitle"> are an INPUT binding, and it will bind the myTitle property on your class to thetitleHTML attribute. This is a one-way binding and themyTitle` property cannot be updated from the button.
• Parenthesis bindngs like are an OUTPUT binding and will (in this case) run thesomeFn()function when theclick` 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.

这篇关于如何修复Uncaught ReferenceError:在HTMLButtonElement.onclick中未定义播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！