我的 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>最佳答案
在执行任何算术运算之前，您必须将您的值转换为正确的数据类型
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;
}
对所有其他值执行此操作
然后你可以做天*人等
关于当所有变量都是数字时，Javascript 返回 Nan？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44402764/