Soy un principiante y estoy tratando de hacer que el envío del botón de opción genere el resultado correspondiente a continuación, una idea bastante simple. Aquí es donde estoy atascado

 <h3>Choose Your Variable</h3> <form action="#"> <label for="itemtype"><input id="xmon" type="radio" name="monname" value="x">Xmon</label> <label for="itemtype"><input id="ymon" type="radio" name="monname" value="y">Ymon</label> <label for="itemtype"><input id="zmon" type="radio" name="monname" value="z">Zmon</label><br> <button type="submit">Submit</button> <button type="reset">Reset</button> </form> <p id="item">Your item is...</p> <script> let answer = document.querySelectorAll("[name='monname']"); let form = document.querySelector("form"); form.addEventListener("submit", redirect); function redirect() { event.preventDefault(); if(answer.value == "x"){ document.getElementById("item").innerHTML="Amon"; }else if(answer.value == "y"){ document.getElementById("item").innerHTML="Bmon"; }else { document.getElementById("item").innerHTML="Cmon"; } } </script>

On let answer = document.querySelectorAll("[name='monname']"); el resultado final siempre es "Cmon" sin importar el botón de opción seleccionado.
Si lo cambio para let answer = document.querySelector("[name='monname']"); el resultado siempre es "Amon" sin importar el botón de opción seleccionado.

No tengo idea de lo que me estoy perdiendo. También se agradecen los comentarios generales sobre el código.