为什么当用户单击按钮时我的标签没有更新？

Question

我似乎看不出我的条件语句中缺少什么。单击页面上的按钮时，textContent 不会更新。

const btn1 = document.querySelector('.btn1');
const btn2 = document.querySelector('.btn2');
const btn3 = document.querySelector('.btn3');
const playerChoice = [btn1, btn2, btn3];
const computerChoice = ['Lapis','Payrus','Scalpellus']


// Game options rock[0] , paper[1] , scissors[2]
// Lapis, Papyrus, Scalpellus;

  const startGame = () => {
    
    playerChoice.forEach(options => {
            options.addEventListener('click', function(){ 
            
          const rantInt = Math.floor(Math.random() * 3);
          const pcOptions = computerChoice[rantInt];

            //Callback to compare choices
            compareChoices(this.innerHTML, pcOptions);
        });
       
    });
  };
   startGame();

  const compareChoices = (player, computer) => {

    const result = document.querySelector('.winner');
    
      if ( player === computer) {
          result.textContent = 'TIE'
      } 
      else if (player == 'Lapis' && computer == 'Scalpellus') {
        result.textContent = 'Player won! Lapis beats Scalpellus.';
      }
        else if (computer == 'Lapis' && player == 'Scalpellus') {
          result.textContent = 'Computer won! Lapis beats Scalpellus';
        } 
    else {
      return;
    }
      
  };

text-align: { 
center;
}

h2 {
  margin: 60px;
  text-align: center;
}

.button {
  text-align: center;
  font-family: 'Rubik', sans-serif;
  background-color: #E44949;
}

.btn1 {
  margin: 25px;
  width: 70px;
  height: 30px;
  text-align: center;
  font-family: 'Rubik', sans-serif;
  background-color: #FA9696;
}

.btn2 {
  margin: 25px;
  width: 70px;
  height: 30px;
  text-align: center;
  font-family: 'Rubik', sans-serif;
  background-color: #FA9696;
}

.btn3 {
  margin: 25px;
  width: 80px;
  height: 30px;
  text-align: center;
  font-family: 'Rubik', sans-serif;
  background-color: #FA9696;
  color: black;
}

<style>
@import url('https://fonts.googleapis.com/css2?family=Londrina+Shadow&family=Rubik:ital,wght@1,300&display=swap');
</style>

<h1>Let's play! Click on the buttons.</h1>

<h1>
   <button class="btn1">Lapis</button> 
    <button class="btn2">Papyrus</button>  
    <button class="btn3">Scalpellus</button>
  </h1>

  <h2 class="winner"></h2>

    <script src="script.js"></script>
  </body>
</html>

Answer 1

箭头函数更改 this 的值。
要使 this 引用元素（按钮），请使用普通函数：

playerChoice.forEach(function(options) {
  options.addEventListener("click", function () {
    const rantInt = Math.floor(Math.random() * 3);
    const pcOptions = computerChoice[rantInt];

    //Callback to compare choices
    compareChoices(this.innerHTML, pcOptions);
  });
});