Javascript不起作用_Javascript_Html

Javascript不起作用

javascript html

Javascript不起作用,javascript,html,Javascript,Html,函数提交（）{ var city=document.getElementById（'Arrival'）。值； var hotel=document.getElementById（'hotel'）.value； var people=document.getElementById（'travelers'）.value； var days=document.getElementById（'day'）.value；无线网络； if（document.getElementById（'Wifi'）。ch

函数提交（）{
var city=document.getElementById（'Arrival'）。值；
var hotel=document.getElementById（'hotel'）.value；
var people=document.getElementById（'travelers'）.value；
var days=document.getElementById（'day'）.value；
无线网络；
if（document.getElementById（'Wifi'）。checked=false）
wifi=0；
if（document.getElementById（'Wifi'）。checked=true）
wifi=10；
var席位；
如果（document.getElementById（'recline'）。checked=false）seat=0；
如果（document.getElementById（'recline'）。checked=true）seat=20；
var MEIN=document.getElementById（'MEIN'）.value；
var价格1=人*餐；
var price2=人*斜倚；
var价格3=酒店*天；
document.getElementById（“Total”）.innerHTML='您的总数是'+（到达+价格3+Wifi+价格1+价格2）；
返回false；
}


预订
广告狂人巴士公司
名字：
姓氏：
抵达城市：
圣路易斯

密尔沃基

底特律

酒店选择：
节约

标准

高档的

旅客人数
1.
2.
3.
4.
5.
6.
天数
2.
3.
4.
5.
6.
7.
额外费用
无线网络

完全倾斜座椅

膳食选择：
没有

小吃

全餐

特别要求：


全部的

除了注释单选按钮中提到的内容外，同一组上的按钮必须具有相同的id才能获得准确的选定值。

简单地回答您的问题（为什么按钮不起作用而代码不执行），是因为

输入[type=“button”]

onsubmit

属性正在引用尚未提交的函数（

Submit

）。。（根据DOM）已加载/定义

另外，您忘了添加括号，例如

您的代码格式不好，缺乏完成任务所需的语义。我做了一些重的重构，得到了这个

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Make a Reservation</title>
    <script type="text/javascript" src="final_project_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 required type="text"></p>
      <p>Last Name: <input required type="text"></p>

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


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

      <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 checked type="radio" name="meal" id="none" value="0" /></br>
          Snack<input type="radio" name="meal" id="snack" value="5"/></br>
          Full Meal<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" />
      </div>

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




<script type="text/javascript">

  document.querySelector('input[type="button"]').onclick = Submit;


  function Submit(){
    var city = Number(document.querySelector('input[name="Arrival"]:checked').value);
    var hotel = Number(document.querySelector('input[name="Hotel"]:checked').value);
    var people = Number(document.getElementById('travelers').value);
    var days = Number(document.getElementById('day').value);
    var wifi = document.getElementById('Wifi').checked === false ?
                0 :
                10;

    var seat = document.getElementById('recline').checked === false ?
                0 :
                20;

    var meal = Number(document.querySelector('input[name="meal"]:checked').value);
    var price1 = people * meal;
    var price2 = people * seat;
    var price3 = hotel * days;


    document.getElementById("Total").innerHTML = 'Your total is ' + (city + price3 + wifi + price1 + price2 );

    return false;
  }
</script>
  </body>
</html>


预订
广告狂人巴士公司
名字：
姓氏：
抵达城市：
圣路易斯

密尔沃基

底特律

酒店选择：
节约

标准

高档的

旅客人数
1.
2.
3.
4.
5.
6.
天数
2.
3.
4.
5.
6.
7.
额外费用
无线网络

完全倾斜座椅

膳食选择：
没有

小吃

全餐

特别要求：


全部的
document.querySelector（'input[type=“button”]”）。onclick=Submit；
函数提交（）{
var city=编号（document.querySelector（'input[name=“Arrival”]：checked'）。值）；
var hotel=编号（document.querySelector（'input[name=“hotel”]：checked'）。值）；
var people=Number（document.getElementById（'travelers'）.value）；
var天数=编号（document.getElementById（'day'）.value）；
var wifi=document.getElementById（'wifi'）。选中===false？
0 :
10;
var seat=document.getElementById（'recline'）。选中===false？
0 :
20;
var MEIN=编号（document.querySelector（'input[name=“mean”]：checked'）。值）；
var价格1=人*餐；
var price2=人员*座位；
var价格3=酒店*天；
document.getElementById（“Total”）.innerHTML='您的总数是'+（城市+价格3+wifi+价格1+价格2）；
返回false；
}

如果（document.getElementById（'Wifi'）。checked=false）

一个等号是赋值，而不是比较。要进行比较，请使用双等于或三等于。您还需要一个id为“total”的元素，以便在运行时应用结果-total，并且可以使用ternaly而不是if的-document.getElementById（'Wifi'）.checked？wifi=10:wifi=0；Google javascript相等运算符这就是为什么if语句中的赋值在python中是无效语法的原因。。。