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