Входное значение не отображается

Question

Я создал многофазную форму, которая имеет 3 шага. На первом этапе вы можете выбрать пол, на втором этапе вы можете выбрать свой возраст, а на последнем этапе отобразить пол, который вы выбрали, а также возраст.

Проблема заключается в том, что когда я выбираю, например, «человек» для пола, на последнем шаге он не отображает значение пола как человека (значение = «м»), а вместо этого отображает его как женщин (значение = "w").

Как я могу решить эту проблему?

Частичный код HTML

<h3 id="status">Phase 1 of 2</h3> 
<form id="multiphase" onsubmit="return false"> 
    <div id="phase1"> 
    <div> 
     <label> 
     <input id="gender" type="radio" name="gender" value="w" /> 
     <img src="https://cdn2.iconfinder.com/data/icons/rcons-user/32/female-shadow-circle-512.png" width="180px" height="180px"> 
     </label> 
     <label> 
     <input id="gender" type="radio" name="gender" value="m"/> 
     <img src="http://www.interport.sk/sites/default/files/inline-images/riaditel-spolocnosti_2.png" width="180px" height="180px"> 
     </label> 
    </div> 
    <button onclick="processPhase1()">Continue</button> 
    </div> 
    <div id="phase2"> 
     <div> 
     <select id="age" name="age"> 
      <option>Choose your age</option> 
      <option>18</option> 
      <option>19</option> 
     </select> 
     </div> 
     <button onclick="processPhase2()" class="button-phase2">Continue</button> 
    </div> 
    <div id="show_all_data"> 
     Gender: <span id="display_gender"></span> <br> 
     Age: <span id="display_age"></span> <br> 
    </div> 
</form> 

Answer 1

Заменитель class="gender" для id="gender". id элемента в document должен быть уникальным.

Использование document.querySelector() с селектором ".gender:checked" в processPhase1 функции

<div id="phase1"> 
    <div> 
    <label> 
     <input class="gender" type="radio" name="gender" value="w" /> 
     <img src="https://cdn2.iconfinder.com/data/icons/rcons-user/32/female-shadow-circle-512.png" width="180px" height="180px"> 
    </label> 

    <label> 
     <input class="gender" type="radio" name="gender" value="m" /> 
     <img src="http://www.interport.sk/sites/default/files/inline-images/riaditel-spolocnosti_2.png" width="180px" height="180px"> 
    </label> 

    </div> 
    <button onclick="processPhase1()">Continue</button> 

gender = document.querySelector(".gender:checked").value; 

codepen http://codepen.io/anon/pen/ObYrEO

Answer 2

это потому, что вы дали один и тот же идентификатор атрибута для кнопок радио для пола и вы пытаются получить значение с помощью идентификатора. Для радио-кнопки, которые являются группой, вы можете получить кнопку проверил радио под названием группы

Изменить

<input id="gender" type="radio" name="gender" value="w" /> 
<input id="gender" type="radio" name="gender" value="m"/> 

к чему-то вроде

<input id="genderw" type="radio" name="gender" value="w" /> 
<input id="genderm" type="radio" name="gender" value="m"/> 

и получить значение пола в сценарии, как ниже.

gender = document.querySelector('input[name="gender"]:checked').value; 

Код перо: http://codepen.io/anon/pen/qqGLyO