JavaScript HTML DOM - Retrieve element ID outside for loop

Question

I need to create checkbox for each element in data.contents. So far I have created checkboxes using createElemnt(), set ID as their respective title and calling myFunction() during onClick. Now I am trying to retrieve ID when the checkbox is clicked using getElementbyID(b.title) and ended up with an error "b is not defined" which is obvious because I am trying to access b.title outside for loop.

I can't place myFunction() inside for loop because getElementById(b.title) is giving last checkbox's ID for all checkboxes if i do onClick which is also obvious because that's the last iteration's (b.title) of for loop.

My purpose is to retrieve ID(which was dynamically set inside for loop) of a checkbox during onClick from outside for loop. Any help would be much appreciated.

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>

CertainPerformance · Accepted Answer · 2018-11-18 02:47:46Z

2

Rather than using setAttribute('onClick', consider assigning directly to the onclick property - that will allow you to use the b in that iteration in the handler's closure. There's also no need to create a global function, and you can simply assign to the id property of btn rather than using 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); 
});

If the only reason you were setting the ID was to be able to select it again with getElementById later, you can omit that entirely, due to the closure.

answered Nov 18, 2018 at 2:47

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Poul Bak · Accepted Answer · 2018-11-18 03:38:42Z

0

Try this,

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);
}

edited Nov 18, 2018 at 3:38

Poul Bak

11k5 gold badges39 silver badges70 bronze badges

answered Nov 18, 2018 at 3:07

austinabraham_a

112 bronze badges

2 Comments

Poul Bak Over a year ago

While this might answer the question, please explain why it does.

austinabraham_a Over a year ago

Okay, here we are passing argument(id) to the function and we can use this parameter inside the function.

Collectives™ on Stack Overflow

JavaScript HTML DOM - Retrieve element ID outside for loop

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related