2017-10-11 11 views
1

J'essaye de construire une seule table qui contient toutes les options de prix dont j'ai besoin. Cela devrait être simple, mais je reçois des réponses NaN dans la cellule destinée à contenir le calcul.Calculer la valeur de la cellule en utilisant l'option sélectionnée dans le tableau

<!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>

La cellule NaN DEVRAIT calculer le prix en fonction de l'option choisie dans le menu déroulant et la vraie/fausse valeur de la case à cocher. J'ai essayé de déplacer les portions de script, et lorsqu'elles sont placées devant la table, rien ne se voit dans la cellule. Qu'est-ce que j'oublie ici?

Répondre

2

je changé:

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

Pour:

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>