如何根据点击通过ID获取元素答案

【问题标题】：How to get element by ID based on click如何根据点击通过ID获取元素
【发布时间】：2020-05-25 02:07:55
【问题描述】：

我在页面上有几张图片，我试图在点击它们时以模式打开它们。我正在使用document.getElementById() 来尝试定位被点击的图像ID。到目前为止，我已经尝试创建一个函数，将点击的 ID 转换为变量以传递给document.getElementById(variable)，但这似乎不起作用。有没有更好的方法来解决这个问题？

function open_clicked(clicked_id) {
   var current_id = clicked_id;
}

document.getElementById(current_id);

 <img id="Elk" src="images/elk.png" alt="Elk" onclick="open_clicked(this.id)">
 <img id="Deer" src="images/deer.png" alt="Deer" onclick="open_clicked(this.id)">

【问题讨论】：

current_id 是一个仅对您的 open_clicked 函数可见的变量。尝试将 var current_id 放在函数之外。这将是一个好的开始。
您可以通过this，而不是将this.id 传递给您的open_clicked，这将是元素（这意味着无需通过document.getElementById() 访问它）跨度>

标签： javascript onclick dom-events getelementbyid

【解决方案1】：

您可以将this 作为参数传递给open_clicked，而不是将this.id 作为参数传递给被点击的元素。

这是一个简单的演示。

function open_clicked(currImg) {
   // you do not need to call document.getElementById again 
   // currImg is the img element that was clicked
   var currentImgId = currImg.getAttribute("id")
   console.log(currentImgId)
}

<img id="Elk" src="images/elk.png" alt="Elk" onclick="open_clicked(this)"/> 
<img id="Deer" src="images/deer.png" alt="Deer" onclick="open_clicked(this)"/>

【讨论】：