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>

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>

• javascript
• html
• radio-button
• label

• Fixing a simple typo solves the problem. This question should probably be closed for that reason because it's root cause isn't programming related. – gfullam Commented Aug 18, 2016 at 19:06
• Spell correct label element first – AB Udhay Commented Aug 18, 2016 at 19:09

1 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/h09mm827/2/