JavaScript HTML DOM - 在循环外检索元素 ID

Question

我需要创建 checkbox对于 data.contents 中的每个元素。到目前为止，我已经创建了 checkboxes使用 createElemnt() ，将ID设置为各自的标题并调用myFunction()在onClick期间.现在我正在尝试使用 getElementbyID(b.title) 单击复选框时检索 ID并以错误“b is not defined”结束，这很明显，因为我试图在 for 循环之外访问 b.title。

我无法放置 myFunction()在 for 循环中因为 getElementById(b.title)正在为所有 checkboxes 提供最后一个复选框的 ID如果我执行 onClick 这也很明显，因为那是 for 循环的最后一次迭代 (b.title)。

我的目的是检索 checkbox 的 ID(在 for 循环内动态设置)在来自外部 for 循环的 onClick 期间。任何帮助将不胜感激。

data.contents.forEach(b => {
  const btn = document.createElement('input')
  btn.type = 'checkbox'
  btn.setAttribute("id", b.title)
  btn.setAttribute("onClick", "myFunction();");
  var t = document.createTextNode(b.title);
  mydiv.appendChild(btn);
  mydiv.appendChild(t);
});

window.myFunction = function() {
  var checkBox = document.getElementById(b.title);
  console.log(b.title)
}

HTML

<div id="mydiv">
</div>

Answer 1

与其使用 setAttribute('onClick'，不如考虑直接分配给 onclick 属性 - 这将允许您使用 b该迭代在处理程序的闭包中。也不需要创建全局函数，您可以简单地分配给 btn 的 id 属性，而不是比使用 setAttribute:

data.contents.forEach(b => {
  const btn = document.createElement('input')
  btn.type = 'checkbox'
  btn.id = b.title;
  btn.onclick = () => {
    console.log(b.title);
    // do stuff with button and b
  };
  var t = document.createTextNode(b.title);  
  mydiv.appendChild(btn);
  mydiv.appendChild(t); 
});

如果您设置 ID 的唯一原因是稍后能够使用 getElementById 再次选择它，您可以完全忽略它，因为闭包。