JavaScript HTML DOM - извлечение идентификатора элемента снаружи для цикла

Question

Мне нужно создать checkbox для каждого элемента в data.contents.До сих пор я создал checkboxes, используя createElemnt(), установил ID в качестве соответствующего заголовка и вызвал myFunction() во время onClick.Теперь я пытаюсь получить идентификатор, когда флажок установлен с помощью getElementbyID(b.title) и в результате возникла ошибка «b не определено», что очевидно, потому что я пытаюсь получить доступ к b.title снаружи для цикла.

Я не могу поместить myFunction() внутри цикла for, потому что getElementById(b.title) дает идентификатор последнего флажка для всех checkboxes, если я делаю onClick , что также очевидно, потому что это последняя итерация(b.title) для цикла.

Моя цель - получить идентификатор (который был динамически установлен внутри для цикла) для checkbox во время 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

Попробуйте,

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

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

Answer 2

Вместо использования setAttribute('onClick' рассмотрите возможность непосредственного присвоения свойству onclick - это позволит вам использовать b в этой итерации в закрытии обработчика . Также нет необходимости создавать глобальную функцию, и вы можете просто присвоить свойству id btn вместо использования 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); 
});

Если единственная причина, по которой вы устанавливали идентификатор, была в том, чтобы иметь возможность выбрать его снова с помощью getElementById позже, вы можете полностью его опустить из-за закрытия.