Tengo una selección de botón de radio y quiero imprimir el valor seleccionado. Aquí está mi código para eso:
function submit() { let Q1 = document.querySelector('input[name="question1Selection"]:checked').value; console.log(Q1) } <div id="QUESTION1" class="questionContainer"> <h1 class="questionNumTitle">Question 1</h1> <h3 class="questionQuery">How old are you?</h3> <div class="questionSelection"> <div class="selectionContainer"> <input type="radio" id="ageQ1" name="question1Selection"> <label for="ageQ1">0-18 years old</label><br> </div> <div class="selectionContainer"> <input type="radio" id="ageQ2" name="question1Selection"> <label for="ageQ2">19-40 years old</label><br> </div> <div class="selectionContainer"> <input type="radio" id="ageQ3" name="question1Selection"> <label for="ageQ3">41-64 years old</label><br> </div> <div class="selectionContainer"> <input type="radio" id="ageQ4" name="question1Selection"> <label for="ageQ4">65+ years old</label> </div> </div> </div><br><br> <input type="submit" onclick="submit()" value="Submit"/>Sin embargo, cuando selecciona un valor y presiona "enviar", la consola misteriosamente simplemente imprime "encendido". ¿Que esta pasando aqui? ¿Por qué no imprime el valor?
Gracias por cualquier ayuda.
Su valor se almacena dentro de la etiqueta, no en el botón de opción.
La input no tiene valor que está predeterminado on
Puede intentar obtener el índice del elemento marcado y devolver el valor de la etiqueta.
Use + para obtener la label del hermano del botón de entrada
function submit(){ document.querySelectorAll('input[name="question1Selection"]').forEach((i,index)=>{ if(i.checked) console.log(document.querySelectorAll('input[name="question1Selection"] + label')[index].textContent) }); } <div id="QUESTION1" class="questionContainer"> <h1 class="questionNumTitle">Question 1</h1> <h3 class="questionQuery">How old are you?</h3> <div class="questionSelection"> <div class="selectionContainer"> <input type="radio" id="ageQ1" name="question1Selection"> <label for="ageQ1">0-18 years old</label><br> </div> <div class="selectionContainer"> <input type="radio" id="ageQ2" name="question1Selection"> <label for="ageQ2">19-40 years old</label><br> </div> <div class="selectionContainer"> <input type="radio" id="ageQ3" name="question1Selection"> <label for="ageQ3">41-64 years old</label><br> </div> <div class="selectionContainer"> <input type="radio" id="ageQ4" name="question1Selection"> <label for="ageQ4">65+ years old</label> </div> </div> </div><br><br> <input type="submit" onclick="submit()" value="Submit"/>