當所有變量都是數字時，返回Nan的Javascript？

-1

我的js在「你的總數是」後返回NaN。但我爲什麼沒有絲毫的想法。我認爲我已經正確地宣佈了所有變量;這是爲什麼發生的另一個原因？當所有變量都是數字時，返回Nan的Javascript？

下面是我的代碼如下。 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>

來源

2017-06-07 Abbey Laxgang

沒有，'element.value'是一個字符串 - 嘗試'parseFloat（元素。值）' - 即'變種城市= parseFloat（document.getElementsByName（ '城市'）值）;'' –

document.getElementsByName（ '城市'）value'例如不是數字 –

單個''=是賦值，所以'if（document.getElementsByName（'sausage'）。checked = false）'將取消選中該框。 '= true'會檢查它。當'x'爲'false'時使用'！x'來獲得'true'，並且'x'爲'true'時只需寫'x'來獲得'true'。 – Ryan

你必須在執行任何算術opetraion之前，你的價值觀轉化爲正確的數據類型

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; 
}

這樣做對所有其他值

然後你可以做天*人等

來源

2017-06-07 03:01:26 Arun

*「你必須在執行任何算術opetraion之前，你的價值觀轉化爲正確的數據類型」 * - 除了幾家運營商自動字符串轉換爲數字，比如：'*'，' - '，'/'，所以你不一定*必須先*轉換值。 – nnnnnn

document.getElementsByName返回一個數組，所以你需要設置[0]。

我建議只使用document.querySelector。

和注意到一個節點的值是一個字符串，而不是一個號碼。你應該轉換它。

，不要使用一個「=」，在「如果」

這裏是我的代碼：

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; 
}

來源

2017-06-07 03:08:23

當所有變量都是數字時，返回Nan的Javascript？

回答

相關問題