我必须修复一个程序来计算一群人参加某次旅行的总费用。共有三个旅游项目，每个项目都有 child 和成人的单独费用。我相信我已经编写了正确的 java 和 html 来执行此操作，尽管它似乎不起作用。 JavaScript:
function calculateTotal (){
"use strict";
var adults = document.tour.adults.value;
var children = document.tour.children.value;
var costAdults = [180,120,80]; //stored prices for adults for each tour in an array
var costChildren = [155,120,70];
var tour = document.tour.tours.value; //isnt used
var cost = 0;
if (document.tour.tours.options[0].selected) {
//if option 0 (All Day Dreamer) is selected, then cost = cost of adult [0]*number of adults + cost of children [0]*number of children
cost = costAdults[0]*adults + costChildren[0]*children;
}
if (document.tour.tours.options[1].selected) {
cost = costAdults[1]*adults + costChildren[1]*children;
}
if (document.tour.tours.options[2].selected) {
cost = costAdults[2]*adults + costChildren[2]*children;
}
document.getElementById("cost").innerHTML = "Cost is" + cost;
}
HTML:
<title>Captain Joes Tours</title>
<script src="Captain Joes Tours.js" type="text/javascript"></script>
</head>
<body>
<form id="tour">
Adults:
<select name="adults">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br>
Children:
<select name="children">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br>
Tour:
<select name="tours">
<option name="All Day Dreamer">All Day Dreamer</option>
<option name="Half-Day Safari">Half-Day Safari</option>
<option name="2-Hour Adventure">2-Hour Adventure</option>
</select>
<input id = "submit" type = "button" value = "Submit" onclick = "calculateTotal();">
</form>
<div id="price">
<p id="cost">Cost:</p>
</div>
</body>
成人和 child 的数量可以是1到4。选择的值与javascript中的varadults和varchildren相同。 如果选择“All Day Dreamer”旅游 [0]，则可以通过将成人人数乘以 costAdults 数组中的 [0] 变量并将其添加到 child 的当量来计算成本。对于具有相应变量的其他游览可以完成相同的过程。
The page looks like this, yes very basic I will fix it later
问题是，提交按钮不显示任何费用。这是一个非常简单的程序，而且我没有 JavaScript 经验，所以我找不到问题所在。
非常感谢您的帮助。
最佳答案
var adults = 1;
var children = 1;
var costAdults = [180,120,80]; //stored prices for adults for each tour in an array
var costChildren = [155,120,70];
var tour = "All Day Dreamer"; //isnt used
var cost = 0;
function myFunctionAdult(sel)
{
adults = parseInt(sel.options[sel.selectedIndex].text);
}
function myFunctionChildren(sel)
{
children = parseInt(sel.options[sel.selectedIndex].text);
}
function myFunctionDreamer(sel)
{
tour = sel.options[sel.selectedIndex].text;
}
function calculateTotal (){
if (tour === "All Day Dreamer") {
//if option 0 (All Day Dreamer) is selected, then cost = cost of adult [0]*number of adults + cost of children [0]*number of children
cost = costAdults[0]*adults + costChildren[0]*children;
}
if (tour === "Half-Day Safari") {
cost = costAdults[1]*adults + costChildren[1]*children;
}
if (tour === "2-Hour Adventure") {
cost = costAdults[2]*adults + costChildren[2]*children;
}
document.getElementById("cost").innerHTML = "Cost is: " + cost;
} <title>Captain Joes Tours</title>
<script src="Captain Joes Tours.js" type="text/javascript"></script>
</head>
<body>
<form id="tour">
Adults:
<select name="adults" id="adults" onChange="myFunctionAdult(this);">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br> Children:
<select name="children" onChange="myFunctionChildren(this)">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br> Tour:
<select name="tours" onChange="myFunctionDreamer(this)">
<option name="All Day Dreamer">All Day Dreamer</option>
<option name="Half-Day Safari">Half-Day Safari</option>
<option name="2-Hour Adventure">2-Hour Adventure</option>
</select>
<input id="submit" type="button" value="Submit" onclick="calculateTotal();">
</form>
<div id="price">
<p id="cost">Cost:</p>
</div>
</body>关于Javascript 在函数中访问 DOM 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46924046/