Question

我必须修复一个程序，计算一组人去某个旅行的总费用。有三个旅游团，每个都有儿童和成人的个人费用。我相信我已经写了正确的java和html来做到这一点，虽然看起来不行。使用Javascript：

pip install google

HTML：

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;
}

成人和儿童的数量可以是1到4.所选的值与javascript中的var adult和var children相同。如果选择了巡回[0]，这将是全日梦想家，可以通过将成人数乘以costAdults数组中的[0]变量并将其添加到孩子的等价物来计算成本。对于具有相应变量的其他游览，可以进行相同的过程。

The page looks like this, yes very basic I will fix it later

问题是，提交按钮不显示任何费用。这是一个非常简单的程序，我没有javascript经验，所以我找不到问题。

非常感谢帮助。

Answer 1

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>

Answer 2

// Register a listener to the form submit event
document.getElementById("tour").addEventListener("submit", showCost);

// Presentation.
function showCost (event) {
  var form = event.target.elements;
  document.getElementById("cost").innerHTML = "Cost is " + 
  calculateTotal(
    Number(form.adults.value), 
    Number(form.children.value), 
    form.tours.selectedIndex
  );
  event.preventDefault();
}

// Logic.
function calculateTotal (numbOfAdults, numbOfChildren, tourIndex) {
  var costAdults = [180,120,80];    //stored prices for adults for each tour in an array
  var costChildren = [155,120,70];
  var totalCost = costAdults[tourIndex] * numbOfAdults + costChildren[tourIndex] * numbOfChildren;
  return totalCost;
}

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>
  <button type="submit">Calculate</button>
</form>
<div id="price">
<p id="cost">Cost:</p>
</div>
</body>

请参阅qPzQXg上Jorge Gonzalez（@donmae）的笔CodePen。

Javascript在函数中访问DOM元素

2 个答案: