为何UI显示[object HTMLButtonElement]而非所选石头剪刀布按钮文本？

问题描述 #

我开发了一款石头剪刀布游戏，相关代码如下：

JavaScript代码 #

//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>
<button class="paperBtn">Paper</button>
<button class="scissorsBtn">Scissors</button>
</div>

点击Rock/Paper/Scissors按钮时，UI中显示[object HTMLButtonElement]而非对应的按钮文本。用console.log(this)能正确获取到对应的HTML按钮元素，但显示结果不符合预期，请问这是什么原因？

原因与解决方法 #

原因 #

直接在模板字符串里用${this}时，JavaScript会自动调用元素对象的toString()方法，而HTML按钮元素的默认toString()返回值就是[object HTMLButtonElement]，所以才会显示这个内容，而非你想要的按钮文本。

解决方法 #

你需要明确获取按钮的文本内容，把代码里的问题行修改为以下任意一种写法即可：

1. 使用textContent获取文本（兼容性更好，推荐）：

playerDisplay.innerText = ' '+ ` Player: ${this.textContent.trim()}`;

2. 使用innerText获取文本：

playerDisplay.innerText = ' '+ ` Player: ${this.innerText.trim()}`;

3. 也可以通过事件对象的target属性获取触发元素：

playerDisplay.innerText = ' '+ ` Player: ${e.target.textContent.trim()}`;

添加trim()是为了去除文本前后可能存在的空格，让显示更整洁。

内容的提问来源于stack exchange，提问作者garcGut