需要将图像的HTML ID传递到javascript中的变量中，以用于各种功能中

Question

我正在尝试使用https://www.geeksforgeeks.org/how-to-get-the-id-of-the-clicked-button-using-javascript-jquery/中的代码将html中的代码转换为javascript。

我正在创建一个记忆游戏，我将图像存储在一个数组中，并且能够单击它并翻转。我想获取2张图像的ID并进行比较，但是我需要将点击的ID变量从html传递到javascript变量中，以存储它们进行处理：

这是我的detectClick函数代码

**function detectClick(clicked) { 
                htmlID = clicked; 
                return htmlID;}**

这是我的前4个数组元素的表的HTML示例：

***<tr class ="success"  >
            <td onClick="changeimage('tblArr0',tblArr[0]);"><img src='memImages/CardBack.png' id="tblArr0"
            onClick="document.getElementById('tblArr0').src='tblArr[0];detectClick(this.id);';"draggable="true" ondragstart="dragstart_handler(event)"></td>  
            <td onClick="changeimage('tblArr1',tblArr[1]);detectClick(this.id);"><img src='memImages/CardBack.png' id="tblArr1"
            onClick="document.getElementById('tblArr1').src='tblArr[1]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
            <td onClick="changeimage('tblArr2',tblArr[2]);detectClick(this.id);"><img src='memImages/CardBack.png' id="tblArr2"
            onClick="document.getElementById('tblArr2').src='tblArr[2]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
            <td onClick="changeimage('tblArr3',tblArr[3]);detectClick(this.id);"><img src='memImages/CardBack.png' id="tblArr3"
            onClick="document.getElementById('tblArr3').src='tblArr[3]';"draggable="true" ondragstart="dragstart_handler(event)"></td>
          </tr>***

我需要将detectClick（this.id）传递给变量htmlID。

执行此操作的其他任何方式或建议都会有所帮助。

我有tblArr[]，其中包含另一个名为imgArr的数组，该数组存储图像文件的源名称。我能够将数组改组，现在我需要能够处理数组对象以进行比较。我只需要知道如何将ID从图像中重新获取到javascript变量中即可。

感谢您的建议和帮助！

Answer 1

这将创建数组中可用的<td>：

function detectClick(clicked) { 
  htmlID = clicked; 
  return htmlID;
}
  
function loadSuccess() {
  let container = document.getElementById("success");
  for (let i = 0; i < tblArr.length; i++) {
    let new_td = document.createElement("td");
    new_td.setAttribute("onClick", "changeimage('tblArr" + i + "',tblArr[" + i + "]);");
    container.appendChild(new_td);
    
    let new_img = document.createElement("img");
    new_img.src = "memImages/CardBack.png";
    new_img.id = "tblArr" + i;
    new_img.setAttribute("onClick", "this.src='tblArr[" + i + "];detectClick(this.id);';");
    new_img.setAttribute("draggable", "true");
    new_img.setAttribute("ondragstart", "dragstart_handler(event)");
    new_el.appendChild(new_img);
  }
}

<tr class ="success" id="success" onload="loadSuccess()"></tr>