I'm a beginner and am trying to make the radio button submission generate the corresponding result below, fairly simple idea. Here's where I'm stuck

<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']"); the final result is always "Cmon" no matter the radio button selected.
If I change it to let answer = document.querySelector("[name='monname']"); the result is always "Amon" no matter the radio button selected.

I have no idea what I'm missing. General code feedback is also appreciated.