2017-10-11 79 views
1

我正在嘗試構建一個包含所需所有定價選項的表格。這應該很簡單,但我在包含計算的單元格中獲得了NaN響應。使用表中選定的選項計算單元格值

<!DOCTYPE html> 
 
<html> 
 
\t <body> 
 
\t \t <table border="2"> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>Subscription Memberships</th> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Subscription Type: 
 
\t \t \t \t <select id="duration"> 
 
\t \t \t \t \t <option value="1MonthSub">Monthly Subscription</option> 
 
\t \t \t \t \t <option value="3MonthSub">Quarterly Subscription</option> 
 
\t \t \t \t \t <option value="6MonthSub">Bi-Annual Subscription</option> 
 
\t \t \t \t \t <option value="yearSub">Yearly Subscription</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t <br> 
 
\t \t \t \t <input type="checkbox" id="discount"> 
 
\t \t \t \t I am eligible for the student, military, or senior discount.</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><span id="calculated"></span></td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 

 
\t \t <script> 
 
\t \t \t function calcPrice() { 
 

 
\t \t \t \t //Variables 
 
\t \t \t \t var choice = document.getElementById("duration"); 
 
\t \t \t \t var dur = choice.options[choice.selectedIndex].text; 
 
\t \t \t \t var price; 
 
\t \t \t \t var per; 
 
\t \t \t \t var output; 
 

 
\t \t \t \t switch(dur) { 
 
\t \t \t \t case "1MonthSub": 
 
\t \t \t \t \t price = 65; 
 
\t \t \t \t \t per = "/month"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "3MonthSub": 
 
\t \t \t \t \t price = 220; 
 
\t \t \t \t \t per = "/3 months"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "6MonthSub": 
 
\t \t \t \t \t price = 440; 
 
\t \t \t \t \t per = "/6 months"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "yearSub": 
 
\t \t \t \t \t price = 900; 
 
\t \t \t \t \t per = "/year"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t }//end switch 
 

 
\t \t \t \t if (document.getElementById("discount").checked) { 
 
\t \t \t \t \t price = price * 0.9; 
 
\t \t \t \t }//end if 
 

 
\t \t \t \t output = price + per; 
 
\t \t \t \t return output; 
 
\t \t \t }//end calcPrice() 
 

 
\t \t \t document.getElementById("calculated").innerHTML = calcPrice(); 
 
\t \t </script> 
 
\t </body> 
 
</html>

楠細胞應該計算基於從下拉和複選框的真/假值選擇的選項的價格。我嘗試過移動腳本部分,當它們放置在表格之前時,什麼都沒有顯示出來。我在這裏錯過了什麼?

回答

2

我改變:

var dur = choice.options[choice.selectedIndex].text;

要:

var dur = choice.options[choice.selectedIndex].value;

<!DOCTYPE html> 
 
<html> 
 
\t <body> 
 
\t \t <table border="2"> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>Subscription Memberships</th> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Subscription Type: 
 
\t \t \t \t <select id="duration"> 
 
\t \t \t \t \t <option value="1MonthSub">Monthly Subscription</option> 
 
\t \t \t \t \t <option value="3MonthSub">Quarterly Subscription</option> 
 
\t \t \t \t \t <option value="6MonthSub">Bi-Annual Subscription</option> 
 
\t \t \t \t \t <option value="yearSub">Yearly Subscription</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t <br> 
 
\t \t \t \t <input type="checkbox" id="discount"> 
 
\t \t \t \t I am eligible for the student, military, or senior discount.</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><span id="calculated"></span></td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 

 
\t \t <script> 
 
\t \t \t function calcPrice() { 
 

 
\t \t \t \t //Variables 
 
\t \t \t \t var choice = document.getElementById("duration"); 
 
\t \t \t \t var dur = choice.options[choice.selectedIndex].value; 
 
\t \t \t \t var price; 
 
\t \t \t \t var per; 
 
\t \t \t \t var output; 
 

 
\t \t \t \t switch(dur) { 
 
\t \t \t \t case "1MonthSub": 
 
\t \t \t \t \t price = 65; 
 
\t \t \t \t \t per = "/month"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "3MonthSub": 
 
\t \t \t \t \t price = 220; 
 
\t \t \t \t \t per = "/3 months"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "6MonthSub": 
 
\t \t \t \t \t price = 440; 
 
\t \t \t \t \t per = "/6 months"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "yearSub": 
 
\t \t \t \t \t price = 900; 
 
\t \t \t \t \t per = "/year"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t }//end switch 
 

 
\t \t \t \t if (document.getElementById("discount").checked) { 
 
\t \t \t \t \t price = price * 0.9; 
 
\t \t \t \t }//end if 
 

 
\t \t \t \t output = price + per; 
 
\t \t \t \t return output; 
 
\t \t \t }//end calcPrice() 
 

 
\t \t \t document.getElementById("calculated").innerHTML = calcPrice(); 
 
\t \t </script> 
 
\t </body> 
 
</html>

相關問題