Select labels of radio buttons in a fieldset

Asked Apr 03 '22 at 08:07

Active Apr 03 '22 at 08:09

Viewed 16 times

I want to make it so when the user hovers over the label of radio buttons for a series of colours, the label's background changes to that colour using javascript in a .js file. I appear to be having difficulty selecting the element, however. Nothing occurs when I hover over the labels, so I believe I have issues with selecting the labels. I am not to use jQuery for this problem.

let colourLabel = document.getElementsByName("label");
colourLabel.addEventListener("mouseover",function(event)
{
    event.target.style.color = "white";
    event.target.style.backgroundColor = colourLabel.textContent;
});

<fieldset>
  <legend>Colours</legend>
  <div>
   <input type="radio" name="colour" id="red" value="red" />
   <label for="red" name = "label">red</label>
  </div>

edited Apr 03 '22 at 08:09

Nick

138,499
22
57
95

asked Apr 03 '22 at 08:07

GrittyCritter

If you run the snippet I converted your code into, it will give you a clue as to the problem – Nick Apr 03 '22 at 08:10
Here is how to do what you wanted: https://jsfiddle.net/mplungjan/erasjg8o/ – mplungjan Apr 03 '22 at 08:25
@mplungjan Can this be done through direct style modification by using the contents of the label? – GrittyCritter Apr 03 '22 at 23:53
I am not sure what you mean but likely yes – mplungjan Apr 04 '22 at 03:56

Select labels of radio buttons in a fieldset

0 Answers0