如何用原生JavaScript获取被点击锚标签的ID？

问题原因 #

你当前的代码中，内联事件onClick="showRecipe()"调用函数时，函数内部的this指向的是全局对象（浏览器中为window），而非触发点击的<a>标签，所以this.id会返回undefined。直接写onClick="showRecipe"无反应是因为内联事件需要明确的调用形式，同时这种写法也无法正确绑定元素上下文。

解决方案1：修改内联事件传递元素本身 #

修改生成<a>标签的代码，在onClick中把当前元素作为参数传入：

let recipeTitles = function(){
    return data.map(el => `<a onClick="showRecipe(this)" href="#" class="recipeTitles" id="${el.id}"><h2>${el.title}</h2></a>`).join('')
}

document.querySelector('#recipeTitle').innerHTML = recipeTitles()

然后更新showRecipe函数，接收传入的元素参数：

function showRecipe(element) {
    alert(element.id);
    // 后续逻辑可以直接使用element.id，比如调用spoonacular API获取食谱详情
}

解决方案2：使用事件委托（推荐） #

这种方法分离了HTML结构与JS逻辑，更符合现代前端开发规范，同时能更好地处理动态生成的元素：

1. 首先移除内联事件，生成纯净的<a>标签：

let recipeTitles = function(){
    return data.map(el => `<a href="#" class="recipeTitles" id="${el.id}"><h2>${el.title}</h2></a>`).join('')
}

document.querySelector('#recipeTitle').innerHTML = recipeTitles()

2. 给父元素添加事件监听，通过事件委托捕获子元素的点击事件：

document.querySelector('#recipeTitle').addEventListener('click', function(e) {
    // 找到触发点击的目标<a>标签（即使点击的是内部的<h2>也能通过closest找到父级a）
    const targetRecipeLink = e.target.closest('.recipeTitles');
    if (targetRecipeLink) {
        alert(targetRecipeLink.id);
        // 这里编写后续逻辑，比如用targetRecipeLink.id调用API
        e.preventDefault(); // 阻止a标签默认的跳转行为
    }
})

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