为什么在打字稿中水龙头只能在第一次水龙头中工作

Question

我的问题是，当我点击点击时，只有第一个点击有效，当我点击另一个点击时显示错误

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')

这是我的代码 https://codepen.io/rodkeaw-rk/pen/NWavQPY

Answer 1

如果您查看 html，您会发现有多个元素的 ID 为 'panals'

所以当你打电话时

let panals = document.getElementById('panals')

它将 return id 为 'panals' 的第一个元素，无论您单击哪个面板。这将是 'John' 面板。因此，当您单击 'Anna' 并尝试执行

panals.getElementsByClassName('Anna')[0]

它将 return 未定义，因为 panals 将始终是 John 面板。