JavaScript计算?

时间:2017-11-15 02:19:21

标签: javascript html



function Submit() {
var city=0;
    if (document.getElementById("louis").checked){
        city=40;
    }
    else if (document.getElementById("milwaukee").checked){
    city=20;
    }
    else if (document.getElementById("detroit").cheked){
    city=35;
    }

var hotel=0;
    if (document.getElementById("economy").checked){
        hotel=50;
    }
    else if (document.getElementById("standard").checked){
    hotel=70;
    }
    else if (document.getElementById("upscale").cheked){
    hotel=120;
    }

var numtravelers = parseInt(document.getElementById("travelers").value);

var daystravel = parseInt(document.getElementById("day").value);
var mealchoice=0;
    if (document.getElementById("none").checked){
        mealchoice=0;
    }
    else if (document.getElementById("snack").checked){
    mealchoice=5;
    }
    else if (document.getElementById("fullmeal").cheked){
    mealchoice=10;
    }


var extra=0;
    if (document.getElementById("Wifi").checked){
        extra=10;
    }
    else if (document.getElementById("recline").checked){
    extra=20;
    }


var cost=0;



cost=(city*numtravelers)+(hotel*daystravel)+(numtravelers*mealchoice)+(numtravelers*extra);
document.getElementById("OutputResult").innerHTML="your total cost is $" + cost.toString();






}

body
{background-color: #000080;
color: #C0C0C0;}
 a {
   color: #00ffff;
   border-style: solid;
   border-color: #00ff00;
 }

 form {color: #00ffff;


 }

 h1 {font-style: italic;
   text-align: center;
   color: #FFD700;
   font-family: Helvetica;
   border-style: solid;
   border-style: solid;
   border-color: gold;
 }

 footer {
font-style: italic;
font-family: cursive;
text-align: center;
color: #FFFFFF;


 }

#contact {
  text-align: center;

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Make a Reservation</title>
<script type="text/javascript" src="reservation_javascript.js"></script>
<link rel="stylesheet" type="text/css" href="final_project_css.css">
  </head>
  <body>

    <div id="nav">
        <nav>
            <a href="reservation.htm">Make a Reservation</a>
            <a href="contact.htm">Contact Us</a>
            <a href="mailing.htm">Join Our Mailing List</a>
            <a href="busline_home.htm">Home</a>
        </nav>
    </div>
<div> <h1> Mad Men Bus Company </h1> </div>

      <form name="reservation">
          <p>First Name: <input type="text"></p>
          <p>Last Name: <input type="text"></p>

      <p>Arrival City:</p>
            St. Louis($40)<input type="radio" name="Arrival" id="louis" value="40"/><br>
            Milwaukee($20)<input type="radio" name="Arrival" id="milwaukee" value="20"/><br>
            Detroit($35)<input type="radio" name="Arrival" id="detroit" value="35"/><br>


      <p>Hotel Choice:</p>
            Economy($50/day)<input type="radio" name="Hotel" id="economy" value="50"/><br>
            Standard($70/day)<input type="radio" name="Hotel" id="standard" value="70"/><br>
            Upscale($120/day)<input type="radio" name="Hotel"id="upscale" value="120"/><br>

        <p>Number of Travelers</p>
<select id="travelers">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
</select>

<p>Number of Days</p>
    <select id="day">
          <option value="2">2</option>
          <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>
    </select>


        <p>Extras</p>
            <input type="checkbox" name="extra" id="Wifi" value="10">Wifi<br>
            <input type="checkbox" name="extra" id="recline" value="20">Fully-reclining seat<br>
<div id="Meal">
        <p>Meal Choice:</p>

            None<input type="radio" name="Meal" id="none"/></br>
            Snack($5)<input type="radio" name="Meal" id="snack" value="5"/></br>
            Full Meal($10)<input type="radio" name="Meal" id="fullmeal" value="10"/></br>
</div>


        <p>Special Requests:</p>
        <input type="text" name="SpecialRequests"/>
<div>


<br><input type="button" value="Book My Trip" onclick="Submit()">

</div>

<h1 id="Total">Total</h1>

<div id="OutputResult">

</div>

</form>

<footer>
100 Manly Avenue New York, New York 10016, 555-555-5555, info@madmenbusline.com
</footer>



  </body>
</html>
&#13;
&#13;
&#13;

当用户选择高档酒店选择和/或底特律时,当我点击计算总成本时,每个选项都会返回值0。我给他们分配了正确的价值我很困惑为什么它没有加上我与这两个变量中的每一个相关联的价格。我不认为我的其他陈述是错的......有人可以给我一个暗示,为什么它可能不起作用?

1 个答案:

答案 0 :(得分:0)

  

当用户选择高档酒店选择和/或底特律时

您在这两个地方拼写错误checked。在这种情况下,cheked将返回undefined这是假的。因此,您将获得0而不是预期的数字

您需要的只是修复

else if (document.getElementById("detroit").cheked){

else if (document.getElementById("upscale").cheked){