Javascript表单计算错误



我得到了估计成本的未捕获类型错误,我也对如何与配偶加倍价格有问题。我假设有一个警报窗口,根据从城市、天数和其他选项中进行选择来显示估计成本。泰!

<html>
<head>
  <script language="JavaScript">
    var city_prices = new Array();
    city_prices["New York City"] = 0;
    city_prices["Boston"] = 0;
    city_prices["San Francisco"] = 200;
    city_prices["Los Angeles"] = 200;
     // getCityPrice() finds the price based on the city .
     // Here, we need to take user's the selection from radio button selection
    function getCityPrice() {
      var cityPrice = 0;
      //Get a reference to the form id="cakeform"
      var theForm = document.forms["form1"];
      //Get a reference to the cake the user Chooses name=radCity":
      var selectedCity = theForm.elements["radCity"];
      //Here since there are 4 radio buttons selectedCity.length = 4
      //We loop through each radio buttons
      for (var i = 0; i < selectedCity.length; i++) {
        //if the radio button is checked
        if (selectedCity[i].checked) {
          //we set cityPrice to the value of the selected radio button
          //i.e. if the user choose NYC we set to 0
          //by using the city_prices array
          //We get the selected Items value
          //For example city_prices["New York City".value]"
          cityPrice = city_prices[selectedCity[i].value];
          //If we get a match then we break out of this loop
          //No reason to continue if we get a match
          break;
        }
      }
      //We return the cityPrice
      return cityPrice;
    }
    var number_days = new Array();
    number_days["3"] = 450;
    number_days["4"] = 600;
    number_days["5"] = 750;
    number_days["6"] = 900;
    number_days["7"] = 1050;
    number_days["8"] = 1350;
    number_days["9"] = 1500;
    number_days["10"] = 1650;
    number_days["11"] = 1800;
    number_days["12"] = 1950;
    number_days["13"] = 2100;
    number_days["14"] = 2250;
    number_days["15"] = 2400;
     //This function finds the day price based on the
     //drop down selection
    function getDayPrice() {
      var dayPrice = 0;
      //Get a reference to the form id="form1"
      var theForm = document.forms["form1"];
      //Get a reference to the select id="selNumberDays"
      var selectedDays = theForm.elements["selNumberDays"];
      //set dayPrice equal to value user chose
      //For example number_days["3".value] would be equal to 450
      dayPrice = number_days[selectedDays.value];
      //finally we return dayPrice
      return dayPrice;
    }
     //chksFirst() finds the candles price based on a check box selection
    function chksFirst() {
      var chkFirst = 0;
      //Get a reference to the form id="form1"
      var theForm = document.forms["form1"];
      //Get a reference to the checkbox id="chkFirst"
      var includeFirst = theForm.elements["chkFirst"];
      //If they checked the box set first class to 500
      if (includeFirst.checked == true) {
        chkFirst = 500;
      }
      //finally we return the firstClass
      return chkFirst;
    }
     //chksSpouse() finds the candles price based on a check box selection
    function chksSpouse() {
      var chkSpouse = 0;
      //Get a reference to the form id="form1"
      var theForm = document.forms["form1"];
      //Get a reference to the checkbox id="chkSpouse"
      var includeSpouse = theForm.elements["chkSpouse"];
      //If they checked the box set Total 2x
      if (includeSpouse.checked == true) {
        totalPrice = totalPrice * 2;
      }
      //finally we return the firstClass
      return totalPrice;
    }
    function estimateCost() {
      //Here we get the estimate price by calling our function
      //Each function returns a number so by calling them we add the values they return together
      var totalPrice = getCityPrice() + getDayPrice() +
        chksFirst() + chksSpouse();
      alert(totalPrice);
    }
  </script>
</head>
<body>
  <table align="left" width="600px" border="0" cellpadding="5px">
    <tr>
      <td>
        <form name="form1" id="form1">
          <table border="0">
            <tr>
              <td width="300px"><strong>Last Name: </strong>
              </td>
              <td width="300px">
                <input type="text" name="txtFirstName" value=" " size="20" />
              </td>
            </tr>
            <tr>
              <td><strong>First Name: </strong>
              </td>
              <td>
                <input type="text" name="txtLastName" value=" " size="20" />
              </td>
            </tr>
            <tr>
              <td><strong>Nationality: </strong>
              </td>
              <td>
                <select name="selNationality">
                  <option value="amer">USA</option>
                  <option value="can">Canada</option>
                  <option value="mex">Mexico</option>
                  <option value="ger">Germany</option>
                  <option value="fra">France</option>
                </select>
              </td>
            </tr>
            <tr>
              <td><strong>City you wish to visit: </strong>
              </td>
              <td>
                <input type="radio" name="radCity" value="New York City" />New York City
                <br />
                <input type="radio" name="radCity" value="Boston" />Boston
                <br />
                <input type="radio" name="radCity" value="San Francisco" />San Francisco ($200 surcharge)
                <br />
                <input type="radio" name="radCity" value="Los Angeles" />Los Angeles ($200 surcharge)
                <br/>
              </td>
            </tr>
            <tr>
              <td><strong>Number of days ($150 per day): </strong>
              </td>
              <td>
                <select name="selNumberDays" id="selNumberDays">
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="13">13</option>
                  <option value="14">14</option>
                  <option value="15">15</option>
              </td>
            </tr>
            <tr>
              <td><strong>Other options: </strong>
              </td>
              <td>
                <input type="checkbox" name="chkFirst" id="chkFirst" />First Class Only ($500 surcharge)
                <br />
                <input type="checkbox" name="chkSpouse" id="chkSpouse" />Traveling with Spouse (All costs doubled)
                <br />
              </td>
            </tr>
            <tr>
              <td align="right">
                <input type="button" value="Give me an estimate!" onClick="estimateCost()" id="estimateCost" />
              </td>
              <td align="left">
                <input type="reset" />
              </td>
            </tr>
          </table>
        </form>
      </td>
    </tr>
  </table>
</body>
</html>

在带有onClick="estimateCost()"代码的按钮输入上,删除id="estimateCost" 。由于某种原因,它导致了错误。不过,您实际上应该使用 onClick 侦听器而不是内联 onclick:内联点击 JavaScript 变量

对于配偶的总价,您可能希望将其重新修改为类似这样的东西,您将配偶前的价格传递到 chksSpouse 函数中,并将其返回用作总价。

//chksSpouse() finds the candles price based on a check box selection
function chksSpouse(totalPrice) {
  var chkSpouse = 0;
  //Get a reference to the form id="form1"
  var theForm = document.forms["form1"];
  //Get a reference to the checkbox id="chkSpouse"
  var includeSpouse = theForm.elements["chkSpouse"];
  //If they checked the box set Total 2x
  if (includeSpouse.checked == true) {
    totalPrice = totalPrice * 2;
  }
  //finally we return the firstClass
  return totalPrice;
}
function estimateCost() {
  //Here we get the estimate price by calling our function
  //Each function returns a number so by calling them we add the values they return together
  var preSpouseTotal = getCityPrice() + getDayPrice() + chksFirst();
  var totalPrice = chksSpouse(preSpouseTotal);
  alert(totalPrice);
}

最新更新