点击元素获取ID时出现Uncaught TypeError错误的解决咨询

问题根源 #

你之前的代码存在两处错误：

1. 内联onclick调用getElementId()时，未将当前点击的元素传递给函数，导致函数内的this指向全局对象（浏览器环境下为window），而非点击的按钮。
2. 即便拿到目标元素，document.getElementById(this)也是错误用法——该方法需要传入元素ID的字符串，而非元素本身；且元素自带id属性，无需通过getAttribute获取。

解决方案一：修改内联事件传参 #

调整按钮的onclick逻辑，将当前元素作为参数传入函数，直接通过参数获取ID：

<button id="test" onclick="getElementId(this);"> Test </button>
<script>
function getElementId(element){
  var x = element.id;
  console.log(x); // 输出"test"
}
</script>

解决方案二：使用事件监听（推荐） #

更规范的写法是避免内联事件，通过addEventListener绑定事件，此时this会自动指向点击的元素：

<button id="test"> Test </button>
<script>
// 获取目标按钮元素
const btn = document.getElementById('test');
// 绑定点击事件
btn.addEventListener('click', function() {
  var x = this.id;
  console.log(x); // 输出"test"
});
</script>

如果使用箭头函数（箭头函数不绑定自身this），可通过event.target获取点击元素：

btn.addEventListener('click', (event) => {
  var x = event.target.id;
  console.log(x);
});

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