按freeCodeCamp教程做猜拳游戏，点击按钮无法获取id及箭头函数疑问

1. 核心问题：代码语法错误 #

你这段代码的箭头函数写法有误，导致事件监听逻辑根本没正确执行，所以playerChoice才会一直是null。

错误出在这里：

button.addEventListener('click', (e){

箭头函数的正确语法要求参数列表后必须跟=>，再写函数体的{}，修正后的代码如下：

possibleChoices.forEach(button => button.addEventListener('click', (e) => {
    playerChoice = e.target.id
    playerChoiceDisplay.innerHTML = playerChoice
}))

另外还可以排查两个潜在问题：

• 确认possibleChoices是正确获取到的按钮集合，比如用document.querySelectorAll('button')这类方法，没有返回空元素
• 检查playerChoiceDisplay确实是页面中存在的DOM元素，比如提前用document.getElementById('player-choice-display')这类方法获取完毕

2. 关于箭头函数为什么不用function关键字 #

这是ES6新增的箭头函数语法，是普通function函数的简写形式，核心优势是代码更简洁。对比两种写法：

• 普通函数写法：function(e) { ... }
• 箭头函数写法：(e) => { ... }

如果函数体只有一行代码，还能进一步省略大括号，写法更短：

button.addEventListener('click', (e) => playerChoiceDisplay.innerHTML = e.target.id)

需要注意的是箭头函数的this指向和普通function不同，但你这里用e.target获取点击的按钮，不受this影响，所以完全可以正常使用。

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