使用表中选定的选项计算单元格值
问题描述:
我正在尝试构建一个包含所需所有定价选项的表格。这应该很简单,但我在包含计算的单元格中获得了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>
楠细胞应该计算基于从下拉和复选框的真/假值选择的选项的价格。我尝试过移动脚本部分,当它们放置在表格之前时,什么都没有显示出来。我在这里错过了什么?
答
我改变:
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>