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>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>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>