Tengo una página web con algunas selecciones de botones de opción. No es necesario seleccionar todas las opciones de los botones de opción. Para obtener el valor de cada una de las opciones del botón de radio, estoy usando esto:
var hotend = document.querySelector('input[name="hotend"]:checked').value;¿Creo que esto debería establecer hotend en nulo? Pero parece que esto bloquea la página web cuando no se ha seleccionado un botón de opción en el grupo porque el resto de la función no se ejecuta. ¿Cómo capturo esto y proceso el resto de la función?
Aquí está el código completo:
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <h1>parts</h1> <label for="printer">Choose a part:</label> <select id="printer" name="printer"> <option value="none">Select Printer</option> <option value="CR_10">CR-10</option> </select> <br /> Choose a hotend: <div class="flex-container"> <div> <input type="radio" id="creality_OEM" name="hotend" value="Creality_OEM"> <label for="creality_OEM">Creality OEM</label> </div> <div> <input type="radio" id="micro_swiss" name="hotend" value="Micro_Swiss"> <label for="micro_swiss">Micro Swiss</label> </div> </div> <button class="button" onclick="createParts();" >Generate Parts List</button> <div id="parts_list"> test </div> <div id="test"> something </div> <script> function createParts(){ var partsList=""; var errorList=""; const printer = document.getElementById('printer').value; let nullTest = document.querySelector('input[name="hotend"]:checked'); const hotend= nullTest.value ?? ""; document.getElementById('parts_list').innerHTML=partsList; document.getElementById('test').innerHTML="something"; } </script> </body> </html>Su código "falla" porque está tratando de acceder al value de la propiedad en un objeto null .
Porque document.querySelector('input[name="hotend"]:checked') devuelve null cuando no hay botones de opción seleccionados.
Básicamente, está haciendo esto cuando no se selecciona ningún botón de opción: null.value .
Prueba esto:
const hotendElement = document.querySelector('input[name="hotend"]:checked'); const hotend = hotendElement.value ?? "No hotend selected"; Además, no use var . Usa const y let .