使用 table 中的选定选项计算单元格值

Question

我正在尝试构建一个包含我需要的所有定价选项的单一 table。这应该很简单，但我在包含计算的单元格中得到了 NaN 响应。

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

  <script>
   function calcPrice() {

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

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

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

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

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

NaN 单元格应根据从下拉列表中选择的选项和复选框的 true/false 值计算价格。我试过移动脚本部分，当它们被放置在 table 之前时，单元格中根本没有显示任何内容。我在这里错过了什么？

Answer 1

我改了：

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

收件人：

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

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

  <script>
   function calcPrice() {

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

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

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

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

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

使用 table 中的选定选项计算单元格值

Calculate cell value using selected option in table

javascript

checkbox

html-table

selection