javascript - 我的 javascript 函数返回值时出现问题

Question

我的 javascript 函数无法返回正确的值。所以基本上，我期望出现的是tour_prices-arraylist 中的价格之一。但实际上什么也没有显现出来。如有任何帮助，我们将不胜感激。

var tour_prices = new Array();
tour_prices["0"]=3000;
tour_prices["1"]=4400;
tour_prices["2"]=5500;
tour_prices["3"]=6600;
tour_prices["4"]=7700;

function tourPrice() {
  var thePrice = 0;
  var scheme = document.forms["orderScheme"];
  var pickDestination = scheme.elements["destination"];
  thePrice = tour_prices[pickDestination.value];

  return thePrice;
}

function calculateTotal() {
  var totalTourPrice = tourPrice();
  
  var totalPrice = document.getElementById('totalPrice');
  totalPrice.innerHTML = "the total tour price is " + totalTourPrice + " usd.";
}

<form action="" id="orderScheme" onsubmit="return false">
  <div>
  <fieldset>
    <legend>Order cruise!</legend>
    <b><label>Pick Destination: </label></b>
    <select id="destination" name='destination' onchange="calculateTotal()">
      <option value="0">destination 1</option>
      <option value="1">destination 2</option>
      <option value="2">destination 3</option>
      <option value="3">destination 4</option>
      <option value="4">destination 5</option>
    </select>
   </fieldset>
  <div id="totalPrice" name="totalPrice"></div><br>
							
<input type='submit' id='submit' value='calculate' onclick="calculateTotal()"></input>
</form>

Answer 1

select 没有自己的值——您需要找到所选的选项(通过 selectedIndex 属性)，然后获取其值。

var tour_prices = new Array();
tour_prices["0"]=3000;
tour_prices["1"]=4400;
tour_prices["2"]=5500;
tour_prices["3"]=6600;
tour_prices["4"]=7700;

function tourPrice() {
  var thePrice = 0;
  var scheme = document.forms["orderScheme"];
  var pickDestination = scheme.elements["destination"];
  var val = pickDestination.options[ pickDestination.selectedIndex ].value;
  thePrice = tour_prices[val];

  return thePrice;
}

function calculateTotal() {
  var totalTourPrice = tourPrice();
  
  var totalPrice = document.getElementById('totalPrice');
  totalPrice.innerHTML = "the total tour price is " + totalTourPrice + " usd.";
}

<form action="" id="orderScheme" onsubmit="return false">
  <div>
  <fieldset>
    <legend>Order cruise!</legend>
    <b><label>Pick Destination: </label></b>
    <select id="destination" name='destination' onchange="calculateTotal()">
      <option value="0">destination 1</option>
      <option value="1">destination 2</option>
      <option value="2">destination 3</option>
      <option value="3">destination 4</option>
      <option value="4">destination 5</option>
    </select>
   </fieldset>
  <div id="totalPrice" name="totalPrice"></div><br>
							
<input type='submit' id='submit' value='calculate' onclick="calculateTotal()"></input>
</form>