Jessica Jessica - 3 months ago 11
HTML Question

htmlFor not working

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

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/