沒有顯示輸入值

我創建了一個有3個步驟的多階段表格。第一步你可以選擇一個性別，第二步你可以選擇你的年齡，最後一步顯示你選擇的性別以及年齡。沒有顯示輸入值

問題是，例如，當我選擇性別爲'man'時，在最後一步，它不會將性別的值顯示爲man（value =「m」），而是將其顯示爲女性（值=「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>

來源

2016-12-26 ute nte

'元件的id'在'document'應該是唯一的。 – guest271314

我不明白，對不起，請你修改我的代碼和鏈接，以便我可以看到有什麼問題。謝謝 –

@ guest271314你可以修改我的代碼和鏈接，以便我可以看到問題所在。謝謝 –

替代class="gender"爲id="gender"。 document中元素的id應該是唯一的。

使用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

來源

2016-12-26 02:33:58 guest271314

謝謝，非常好:) –

@utente請注意，'gender'變量和'if'條件可以調整爲'gender = document.querySelector（「。gender：checked」）; \t if（gender）{'http://codepen.io/anon/pen/GNaPBE?editors=1111 – guest271314

這是因爲你已經給出了相同的id屬性到你的單選按鈕性別和你正嘗試使用ID獲取該值。對於單選按鈕，這是一組可以通過組名獲得檢查單選按鈕

變化

<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

來源

2016-12-26 02:39:27 Deep

沒有顯示輸入值

回答

相關問題