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.
