How to select radio buttons with click to change color on click-CodePudding

I am trying to make a math quiz game for my classroom. I have created a page to select the type of game the user wants. I have created a function to select the the element when it is clicked to change colors but it is not changing colors. I have tried to hard code the styling and it works properly but I only want the styling when the radio container is selected.

const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');
const radioInputs = document.querySelectorAll('input');
const bestScores = document.querySelectorAll('.best-score-value');

startForm.addEventListener('click', () => {
  radioContainers.forEach((radioEl) => {
    radioEl.classList.remove('selected-label');
    if (radioEl.childeren[1].checked) {
      radioEl.classList.add('selected-label');
    }
  });
});

RADIO CONTAINER TO BE SELECTED
<div >
  <label for="value-99">99 Questions</label>
  <input type="radio" name="Questions" value="99" id="value-99">
  <span >
                            <span>Best Score</span>
  <span >0.0</span>
  </span>
</div>

CodePudding user response：

I think you mean this

Delegation from startForm is fine, then we can loop over the divs to see if the radio in the div was checked

const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');

startForm.addEventListener('click', (e) => {
  const tgt = e.target;
  if (tgt.name === "Questions") {
    const parent = tgt.closest('.radio-container')
    radioContainers.forEach(container => container.classList.toggle('selected-label', container === parent && tgt.checked))
  }
});

.selected-label { color: green }

<form id="start-form">
  <div >
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span >Best Score</span>
    <span >0.0</span>
  </div>
  <div >
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span >Best Score</span>
    <span >0.0</span>
  </div>
</form>

CodePudding user response：

Question is somewhat a duplicate. change label color radio when checked I got the answer from here, and it can be done using CSS without needing to use JavaScript.
(Notice some buttons have different colors when clicked) Here's a snippet

input[type="radio"]:checked ~ span
{
color:red;

}

input[type="radio"]:checked.correct ~ span
{
color:green;
}

<form id="start-form">
  <div >
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span >Best Score</span>
    <span >0.0</span>
  </div>
  <div >
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99" class = "correct">
    <span >Best Score</span>
    <span >0.0</span>
  </div>
  <div >
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span >Best Score</span>
    <span >0.0</span>
  </div>
  <div >
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99" class = "correct">
    <span >Best Score</span>
    <span >0.0</span>
  </div>
</form>