Question

我的js在“你的总数是”后返回NaN。但我对于为什么没有丝毫想法。我想我已正确宣布所有变量;还有另外一个原因吗？

以下是我的代码。 js中的其他所有内容似乎都运行良好。

function book() {
  var city = document.getElementsByName('city').value;
  var hotel = document.getElementsByName('hotel').value;
  var people = document.getElementsByName('numtravel').value;
  var days = document.getElementsByName('numdays').value;
  var wifi;
    if ( document.getElementsByName('wifi').checked = false)
    wifi = 0;
    if ( document.getElementsByName('wifi').checked = true)
    wifi = 10;
  var seat;
    if ( document.getElementsByName('sausage').checked = false) seat = 0;
    if ( document.getElementsByName('sausage').checked = true) seat = 20;
  var meal = document.getElementById('meal').value;
  var price1 = people * meal;
  var price2 = people * seat;
  var price3 = hotel * days;

  document.getElementById("p1").innerHTML = 'Your total is ' + ( city + price3 + wifi + price1 + price2 );

  return false;
}

/*   Total eggs, man. ( ͡° ͜ʖ ͡°) */

#main_content
        {
            background-color: lightgoldenrodyellow;
            overflow: hidden;
            text-align: center;
            border: 5px dotted lightblue
        } 


body    {
            background-color: lightgrey;
        }
#content

        {
            background-color: lightgoldenrodyellow;
            overflow: hidden;
            text-align: center;
            border: 5px dotted lightblue
        }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Make a Reservation!</title>
    <script src="new.js"></script>
    <link rel="stylesheet" href="new.css" type="text/css" />
  </head>
  <body>
    <div id="main_content">
      <a href = "file:///Users/abbeylaxgang/Desktop/Bus/busline_home.htm">Home</a>
      <br>
      <a href = "file:///Users/abbeylaxgang/Desktop/Bus/busline_contact.htm">Contact Us</a>
      <br>
      <a href = "file:///Users/abbeylaxgang/Desktop/Bus/busline_new.htm">Make a Reservation</a>
      <br>
      <a href = "file:///Users/abbeylaxgang/Desktop/Bus/busline_email.htm">Join Our Email List</a>
    </div>
    <br>
    <div id="content">
      <div id="reservation">
        <h2> Make a Reservation!</h2>
        <p> First Name: <input type="text" id="first" name="FirstName"/></p>
        <p> Last Name: <input type="text" id="last" name="LastName"/></p>
        <h4>
          <p> Where is your arrival city?</p>
        </h4>
        <p> St. Louis ($40) <input type="radio" value="40" name="city" /></p>
        <p> Milwaukee ($20) <input type="radio" value="20" name="city"/></p>
        <p> Detroit ($35) <input type="radio" value="35" name="city"/></p>
        <h4><p>Hotel Choice?</p></h4>
        <p> Economy ($50/day) <input type="radio" value="50" name='hotel'/></p>
        <p> Standard ($70/day) <input type="radio" value="70" name='hotel'/></p>
        <p> Upscale ($120/day) <input type="radio" value="120" name="hotel"/></p>
        <h4> Amount of travelers? </h4>
        <select id="travelers" name="numtravel">
          <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>
        <h4> Amount of days? </h4>
        <select id="days" name="numdays">
          <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>
        <h4> Extra emenities: </h4>
        <p> Wifi ($10) <input type="checkbox" value='20' name="wifi"></p>
        <p> Fully-Reclining Seat ($20) <input type="checkbox" name="sausage" value='30'></p>
        <h4> Meal choice? </h4>
        <select id="meal" name="meal">
          <option value="0"> None </option>
          <option value="5"> Snack ($5) </option>
          <option value="10"> Full Meal ($10) </option>
        </select>
        <h3> <p> Special Requests?</p> </h3>
        <p> <textarea name="txtRequests" col="25" rows="5" style='width:300px;resize:vertical;'> </textarea></p>
        <p> <button onclick="book()">Book your Trip!</button></p>
        <br>
      </div>
      <h1 id="p1"> </h1>
    </div>
  </body>
</html>

Answer 1

在执行任何算术运算之前，您必须将值转换为正确的数据类型

var days = document.getElementById('numdays').value;

应该是

var days = parseInt(document.getElementById('numdays').value); //convert to integer
if(isNaN(days)) {
    alert("Days must be a valid number");
    return;
}

对所有其他值执行此操作

然后你可以做几天*人等等

Answer 2

document.getElementsByName返回一个数组，因此您需要设置[0]。

我建议只使用document.querySelector。

并注意节点的值是一个字符串，而不是一个数字。你应该转换它。

并且不要使用一个＆＃34; =＆＃34;在＆＃34; if＆＃34;

这是我的代码：

function book() {
    var city = +(document.querySelector("[name='city']:checked") || { value: 0 }).value;
    console.log("city", city);
    var hotel = +(document.querySelector("[name='hotel']:checked") || { value: 0 }).value;
    console.log("hotel", hotel);
    var people = +document.querySelector("[name='numtravel']").value;
    console.log("people", people);
    var days = +document.querySelector("[name='numdays']").value;
    console.log("days", days);
    var wifi;
    if (document.getElementsByName('wifi')[0].checked === false) wifi = 0;
    if (document.getElementsByName('wifi')[0].checked === true) wifi = 10;
    console.log("wifi", wifi);
    var seat;
    if (document.getElementsByName('sausage')[0].checked === false) seat = 0;
    if (document.getElementsByName('sausage')[0].checked === true) seat = 20;
    console.log("seat", seat);
    var meal = +document.getElementById('meal').value;
    console.log("meal", meal);
    console.log(people, meal, seat, days);
    var price1 = people * meal;
    var price2 = people * seat;
    var price3 = hotel * days;

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

    return false;
}

当所有变量都是数字时，Javascript返回Nan？

2 个答案: