Estoy tratando de hacer un juego de preguntas de matemáticas para mi salón de clases. He creado una página para seleccionar el tipo de juego que quiere el usuario. Creé una función para seleccionar el elemento cuando se hace clic para cambiar los colores, pero no cambia los colores. He intentado codificar el estilo y funciona correctamente, pero solo quiero el estilo cuando se selecciona el contenedor de radio.
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>creo que te refieres a esto
La delegación de startForm está bien, luego podemos recorrer los divs para ver si se verificó la radio en el div
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>La pregunta es algo un duplicado. cambiar la radio de color de la etiqueta cuando se verificó Obtuve la respuesta desde aquí, y se puede hacer usando CSS sin necesidad de usar JavaScript.
(Observe que algunos botones tienen colores diferentes cuando se hace clic en ellos) Aquí hay un fragmento
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>