在 Javascript 中点击按钮的动态 ID 获取价值

Question

My.js 文件包含

function ngForEducationDetails() {
        let value = '';
        educationdetails.forEach((x , i) => {
        value += 
      `<div class=""> <p class="f-14 details-subheaders"> ${x.institutename} 
      <button class="edit-icon xd" style="float: right" id="editSingleEducation" value="${i}"> </button> 
      <p class="f-12">${x.fieldofstudy} </p> 
      <p class="f-12 mb-4"> ${x.startdate} - ${x.enddate} </p> </div>` ;
    });

    document.getElementById('fos').innerHTML = value; };

    ngForEducationDetails();

在我的 html 文件中

 <span for="fos" id ="exd" class="col-12"></span> 

我希望在 Button Click 上，我希望 id 的值与之相关联。 以下 function 不起作用。 帮我：）

  document.getElementById('editSingleEducation').addEventListener('click', function() {
  var indexvalue = document.getElementById('editSingleEducation').value
  console.log(indexvalue , "indexvalue")
     })

注意：我不能使用内联 Function，因为我在 chrome Extension 中这样做，而 chrome 扩展不允许它

Answer 1

1. 你正在循环不止一个相同的ID？ 那是不允许的
2. 代表

---

document.getElementById('fos').addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("edit-icon")) {
    console.log(tgt.value);
  }
})

改进代码，在数据属性中使用 id：

 const educationdetails = [{ "candidateeducationid": 4, "institutename": "Mumbai University", "degree": "Bsc", "fieldofstudy": "Science", "startdate": "2019-01-01T00:00:00.000Z", "enddate": "2020-01-01T00:00:00.000Z", "score": null, "activities": null }, { "candidateeducationid": 5, "institutename": "LA", "degree": "MCA", "fieldofstudy": "Science", "startdate": "2018-01-01T00:00:00.000Z", "enddate": "2019-01-01T00:00:00.000Z", "score": null, "activities": null }, { "candidateeducationid": 6, "institutename": "Abu Dhabi University", "degree": "Associate of Arts and Sciences", "fieldofstudy": "Science", "startdate": "2018-01-01T00:00:00.000Z", "enddate": "2020-01-01T00:00:00.000Z", "score": null, "activities": null } ]; function ngForEducationDetails() { let value = educationdetails.map((x, i) => `<div class=""> <p class="f-14 details-subheaders"> ${x.institutename} <button class="edit-icon xd editSingleEducation" data-id="${x.candidateeducationid}" style="float: right">${x.candidateeducationid}</button> <p class="f-12">${x.fieldofstudy} </p> <p class="f-12 mb-4"> ${x.startdate} - ${x.enddate} </p> </div>`); document.getElementById('fos').innerHTML = value.join(""); } ngForEducationDetails() document.getElementById('fos').addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("edit-icon")) { console.log(tgt.dataset.id); } })

 div { border: 1px solid black; padding: 5px; }

 <div id="fos"></div>

Answer 2

同一个 html 文档中的多个元素不应该有相同的 id，所以你的代码应该是

// also notice that only submit buttons can have a value attribute, and its not recommended to let them have values, better use a custom attribute if you want to retrieve it from code
function ngForEducationDetails() {
        let value = '';
        educationdetails.forEach((x , i) => {
        value += 
      `<div class=""> <p class="f-14 details-subheaders"> ${x.institutename} 
      <button class="edit-icon xd" style="float: right" id="editSingleEducation-${i}" data-index-value="${i}"> </button> 
      <p class="f-12">${x.fieldofstudy} </p> 
      <p class="f-12 mb-4"> ${x.startdate} - ${x.enddate} </p> </div>` ;
    });

    document.getElementById('fos').innerHTML = value; };

    ngForEducationDetails();


[...document.querySelectorAll('[id|=editSingleEducation]')].forEach(node => {
   node.addEventListener('click', 
    function(event) {
        // notice that getAttribute will return a string so you may want to parse result
        console.log(indexvalue , event.target.getAttribute('data-index-value')) 
     })
})

Answer 3

• ID 对整个文档来说是唯一的

你不能有多个具有相同 ID 的元素，它会破坏 function
getElementById

如果你想快速修复，但我强烈建议不要在你内部生成 HTML Javascript：

educationdetails.forEach((x , i) => {
    value +=
        `<div class=""> <p class="f-14 details-subheaders"> ${x.institutename} 
  <button onclick="clickMe(event)" data-id="${i}"> Click Me </button> 
  <p class="f-12">${x.fieldofstudy} </p> 
  <p class="f-12 mb-4"> ${x.startdate} - ${x.enddate} </p> </div>` ;
});

function clickMe(e)
{
    console.log(e.target.dataset.id);
}

如果您有兴趣使您的代码更好，您可以使用模板而不是在 Javascript 文件中键入 HTML 代码。

PS：尽量避免使用 innerHTML，因为它会在您的 HTML 中注入 Javascript（XSS 攻击）

资源：

• 使用 getElementById： https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

• 使用模板： https://www.w3schools.com/tags/tag_template.asp

• XSS 附件： https://owasp.org/www-community/attacks/xss/