How do I retrieve survey radio buttons input to the next HTML page? Using local storage and pure javascript

Question

I'm trying to create a response page with information of the user from the survey form. However, I can't retrieve the input for radio buttons. It shows 'on'. Any help?

<!--Survey form-->
<label for="gender" class="question">Gender:</label>
<ol>
<li>
<input type="radio" id="female" name="gender" checked/>
<label class="gender" for="female">Female</label>
</li>

<li>
<input type="radio" id="male" name="gender" />
<label class="gender" for="male">Male</label>
</li>
</ol>
<input type="button" value="Submit Me" name="doIt" />

<!--JS-->
function (doIt){
var checkedValue = null;
var inputElements = document.getElementsByName('gender');

for (var i=0; inputElements[i]; i++){
    if (inputElements[i].checked){
    checkedValue = inputElements[i].value;
    break;
    }
 }
localStorage.setItem("userGender", checkedValue);

window.location = "response.htm";
}
document.getElementsByName("doIt")[0].onclick = doIt;

<!--Response page-->
<script>
  document.write("Gender:"+localStorage.getItem("userGender"))
</script>

Answer 1

You need to set the value attribute for your radio buttons, eg

<ol>
  <li>
    <input type="radio" **value="female"** id="female" name="gender" checked/>
      <label class="gender" for="female">Female</label>
  </li>

  <li>
    <input type="radio" id="male" **value="male"** name="gender" />
    <label class="gender" for="male">Male</label>
  </li>
</ol>

The value specifies the return value when a radio button or checkbox is checked/selected.