如何传递 HTML 元素，从原型中的一种方法到另一种方法

Question

如何将方法 playerElementChoice() 的结果传递给 startGame()

class Game {
    constructor() {
        this.options = document.querySelectorAll('.options');
         this.options.forEach(item => {
            item.addEventListener('click', this.playerElementChoice);
        });


    document.querySelector('button.start').addEventListener('click', this.startGame.bind(this));

}

playerElementChoice() {
    const name = this.firstElementChild.className;
    return name;
}

startGame() {
    console.log(this.playerElementChoice());
}

}

当尝试在方法 startGame() 中调用方法 playerElementChoice () 时出现错误：无法在 Game.playerElementChoice (Game.js:17) 和 Game.startGame (Game.js:28) 读取未定义的属性 'className'。

我做错了什么？

Answer 1

如果您想 select 列表中的单个选项，并记录 selected li className 值，您必须更改您的代码添加一些绑定：

class Game {
  constructor() {
    this.options = Array.from(document.getElementById('options').children);
    this.startButton = document.querySelector('button.start');
    this.name = '';
    this.playerElementChoice = this.playerElementChoice.bind(this);
    this.startGame = this.startGame.bind(this)
  }
  
  init() {
    this.options.forEach(item => {
      item.addEventListener('click', this.playerElementChoice)
    });
   this.startButton.addEventListener('click', this.startGame);
  }

  playerElementChoice(e) {
    e.preventDefault();
    this.name = e.target.className;
}

  startGame() {
    console.log(this.name);
  }
}

let game = new Game()
game.init()

<button class="start">start</button>
<ul id="options">
  <li class="option1" name="one">1</li>
  <li class="option2" name="two">2</li>
  <li class="option3" name="three">3</li>
</ul>

希望对您有所帮助

如何传递 HTML 元素，从原型中的一种方法到另一种方法

How the pass HTML element, from one method to other in prototype

javascript

oop

es6-class