htmlFor not working

Question

I created 3 radio buttons and a label for each of them using JavaScript. When I try adding for in the label using htmlFor , it doesn't apply it to the actual DOM Element. Meaning, when I try using the label on the webpage, it doesn't select the radio button.

I checked in the developer tools, and saw that the labels did not have for applied to them.

What am I doing wrong, and how can I fix it?

JSFiddle

 var _doc = document, sliderWrapper = _doc.getElementById('sliderWrapper'), radioWrapper = _doc.createElement('div'); for (var i = 0; i < 3; i++) { var radio = _doc.createElement('input'); var niceRadio = _doc.createElement('lable'); var index = radioWrapper.children.length / 2; niceRadio.className = 'niceRadio'; niceRadio.htmlFor = radio.id = 'sliderRadio' + index; radio.type = 'radio'; radio.name = 'myName'; radioWrapper.appendChild(radio); radioWrapper.appendChild(niceRadio); console.log(niceRadio.htmlFor); } sliderWrapper.appendChild(radioWrapper); 

 .niceRadio { position: relative; width: 20px; height: 20px; cursor: pointer; border-radius: 50%; border: 5px solid orange; } .niceRadio:hover { border-color: lightblue; } 

 <div id="sliderWrapper"> </div> 

Answer 1

The htmlFor is used to bind a label to a specific form element. However, it uses the id of that form element (not the name ).

Source MDN :

The HTMLLabelElement.htmlFor property reflects the value of the for content property. That means that this script-accessible property is used to set and read the value of the content property for, which is the ID of the label's associated control element.

Also, in your fiddle, you misspelled label .

Updated fiddle: https://jsfiddle.net/h09mm827/2/