如何 select 单选按钮单击更改颜色

Question

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 class="radio-container"> <label for="value-99">99 Questions</label> <input type="radio" name="Questions" value="99" id="value-99"> <span class="best-score"> <span>Best Score</span> <span class="best-score-value">0.0</span> </span> </div>

Answer 1

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 class="radio-container"> <label for="value-99">99 Questions</label> <input type="radio" name="Questions" value="99" id="value-99"> <span class="best-score">Best Score</span> <span class="best-score-value">0.0</span> </div> <div class="radio-container"> <label for="value-99">99 Questions</label> <input type="radio" name="Questions" value="99" id="value-99"> <span class="best-score">Best Score</span> <span class="best-score-value">0.0</span> </div> </form>

Answer 2

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 class="radio-container"> <label for="value-99">99 Questions</label> <input type="radio" name="Questions" value="99" id="value-99"> <span class="best-score">Best Score</span> <span class="best-score-value">0.0</span> </div> <div class="radio-container"> <label for="value-99">99 Questions</label> <input type="radio" name="Questions" value="99" id="value-99" class = "correct"> <span class="best-score">Best Score</span> <span class="best-score-value">0.0</span> </div> <div class="radio-container"> <label for="value-99">99 Questions</label> <input type="radio" name="Questions" value="99" id="value-99"> <span class="best-score">Best Score</span> <span class="best-score-value">0.0</span> </div> <div class="radio-container"> <label for="value-99">99 Questions</label> <input type="radio" name="Questions" value="99" id="value-99" class = "correct"> <span class="best-score">Best Score</span> <span class="best-score-value">0.0</span> </div> </form>