Question

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

＆＃13;

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

＆＃13;

NaN单元格应根据从下拉列表中选择的选项和复选框的true / false值计算价格。我试过移动脚本部分，当它们放在桌子前面时根本没有任何东西出现在单元格中。我在这里缺少什么？

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>

使用表

1 个答案: