Add class to a label in a form when click event on label

Question

I am a newbie at JavaScript.
I want to add a class to my <label> tag, which has no class at first. The reason why I want this is to create CSS rules to the <label> when being active, so I also want to remove the class when I click on other <label>.

<div class="radio">
  <label data-label="" for="fld_8583385_1_opt1271141"><input type="radio" id="fld_8583385_1_opt1271141" data-field="fld_8583385" class="fld_8583385_1" name="fld_8583385" value="15" checked="checked" data-radio-field="fld_8583385_1" data-type="radio" data-calc-value="15">
    Some Text</label>
</div>

<div class="radio">
  <label data-label="" for="fld_8583385_1_opt1611303"><input type="radio" id="fld_8583385_1_opt1611303" data-field="fld_8583385" class="fld_8583385_1" name="fld_8583385" value="10" data-radio-field="fld_8583385_1" data-type="radio" data-calc-value="10">
    Some Text</label>
</div>

Here is my JavaScript that doesn't seem to work:

document.getElementsByTagName("LABEL").onclick = function(){
  document.getElementsByTagName("LABEL").addClass("test");
}

You are adding onclick to an HTML collection, that does not work. You have to add them to each element. Linked duplicate shows how. Either for loop or with Array from and an each loop. — epascarello, Mar 30 '20 at 18:08
I don't think that's a duplicate, because I don't think you'd find that when searching for adding a click handler. It _is_ a good question and turns out to explain what's wrong, but I don't think you'd stumble across it when trying to do this. — Stephen P, Mar 30 '20 at 18:37
@StephenP If it answers the question, then marking it as a duplicate is a *good* thing, because it will make it easier for other people with the same problem to find it. That's the entire point of the duplicate system. — John Montgomery, Mar 30 '20 at 21:18
@John I think I understand the duplicate system; but I think people having this similar problem wouldn't find "What do querySelectorAll and getElementsBy* methods return?" when searching for something like "Do X when clicking Y" — there are other things they'd find, but Pavel wouldn't know his problem is due to the return type of the DOM queries. I believe a good answer here that explained what's wrong **and** _pointed to_ (linked) "What do …" would be most helpful to future readers. (IMHO) which is why I voted to reopen. People are free to disagree with me, but that's why there's voting. — Stephen P, Mar 31 '20 at 17:52

score 1 · Accepted Answer · answered Mar 30 '20 at 18:28

  var labels = document.getElementsByTagName("label");
 
  
  for (let i=0;i<labels.length;i++){
     labels[i].addEventListener("click", addclass);  
  }
  
  function addclass(event){
  event.target.classList.add('test');
  
  }

<div class="radio">
  <label data-label="" for="fld_8583385_1_opt1271141"><input type="radio" id="fld_8583385_1_opt1271141" data-field="fld_8583385" class="fld_8583385_1" name="fld_8583385" value="15" checked="checked" data-radio-field="fld_8583385_1" data-type="radio" data-calc-value="15">
    Some Text</label>
</div>

<div class="radio">
  <label data-label="" for="fld_8583385_1_opt1611303"><input type="radio" id="fld_8583385_1_opt1611303" data-field="fld_8583385" class="fld_8583385_1" name="fld_8583385" value="10" data-radio-field="fld_8583385_1" data-type="radio" data-calc-value="10">
    Some Text</label>
</div>

Add class to a label in a form when click event on label

1 Answers1