入力値が表示されない

Question

3段階の多相フォームを作成しました。最初のステップでは性別を選択し、2番目のステップではあなたの年齢を選択し、最後のステップでは選択した性別と年齢を表示できます。

問題は、最後のステップで性別の「男」を選択した場合、性別の値を男性（値=「m」）として表示せず、女性として表示することです（値= "w"）。

この問題を解決するにはどうすればよいですか？

部分的なコードのHTML id="gender"ため

<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"。 documentの要素のidは一意である必要があります。

codepen 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; 

のセレクタ".gender:checked"で使用document.querySelector()http://codepen.io/anon/pen/ObYrEOあなたは性別とあなたのためのラジオボタンに同じid属性を与えているためである

Answer 2

IDを使用して値を取得しようとしています。グループあるラジオボタンのためには、

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

のように変更

グループ名によって何かに

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

をチェックするラジオボタンを取得することができますし、スクリプトのように性別の値を取得します以下。

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

コードペン：要素のhttp://codepen.io/anon/pen/qqGLyO