javascript [object HTMLButtonElement]在UI中显示

Question

//UI. When play is clicked make R.P.S buttons appear
const startGame= () => {
intro = document.querySelector('.intro');
playBtn = document.querySelector(".playBtn");
match = document.querySelector('.match');
playBtn.addEventListener('click', e => {
match.classList.add("fadeIn");
playBtn.remove();
});
}
//When "rock", "paper", or "scissors" is clicked generate random
//option for computer selection.
const playGame= () => {
button = document.querySelectorAll('.buttons button');
choices= ["rock", "paper", "scissors"];
choiceDisplay = document.querySelector('.matchContainer');
playerDisplay = document.querySelector('.playerDisplay');
button.forEach(button=> {
button.addEventListener('click', function(e) {

computerSelection = choices[ Math.floor((Math.random() *choices.length))];

//display computer and player choice on UI
choiceDisplay.textContent = ` Computer: ${computerSelection } ` + " ";
playerDisplay.innerText = " "+ ` Player: ${this}`;
});
});

}

//这是我的HTML代码的一部分:'

<div class="buttons">
<button class="rockBtn">Rock</button>//here is part of my HTML code:
<button class="paperBtn">Paper</button>
<button class="scissorsBtn">Scissors</button>
</div>

所以，我一直在试图找出为什么它显示[objecthtmlbuttonelement]在我的UI而不是按钮按下可以是:"岩石"， "纸"或";scissors"按钮。我试着console.log(this)，但是它显示了我的HTML的一部分，这取决于所选择的按钮，它选择正确的一个。

Answer 1

this是事件侦听器附加的元素(即button变量)。您要读取它的textContent。

${this.textContent}