可以将单独函数的数组值组合在一起吗
Is It Possible to Combine Array Values from Separate Functions Together?
运行我的代码时,您可以看到,当用户输入房间的数量,选择入住和退房日期并点击提交时,会出现一个表格,其中包含房间名称、为所选房间输入的数量和基于房间数目的价格。此外,还会显示另一个表,其中包含从签入到签出的天数和总数。"总计"假定为天数乘以价格。
出现的第一个表是使用下面javascript中显示的outputArray()函数创建的。第二个表是使用CalcTotals()函数创建的。我需要找到一种方法,将选择的天数与价格相乘,并将其输出为总数。有没有办法将这两件事结合起来,因为它们是在单独的函数中计算的?
function QtyVal()
{
var x,y,z,text;
// Get the value of the input of the room quantities
x = document.getElementById("qty1").value;
y = document.getElementById("qty2").value;
z = document.getElementById("qty3").value;
if (y < 1 || y > 8)
{
text = "please enter quantity from 1 to 8";
}
else if (x < 1 || x > 8)
{
text = "please enter quantity from 1 to 8";
}
else if (z > 1 || isNaN(z))
{
text = "Due to limited availability, " +
"guests are only allowed to " +
"book one Penthouse Suite per stay";
}
else if (x == '' && y == '' && z == '')
{
text = "Please select a room";
}
else
{
text = "";
var n1 = new Array(); // allocate empty array
var n2 = new Array(); // allocate another empty array
n1.push(document.getElementById("qty1").value);
n1.push(document.getElementById("qty2").value);
n1.push(document.getElementById("qty3").value);
outputArray(n1, document.getElementById( "results" ) );
CalcTotals(n2, document.getElementById( "totals" ) );
}
document.getElementById("book").innerHTML = text;
}
function outputArray(theArray, output )
{
var content = "<table>" + "<thead><th>Room Type</th><th>Quantity</th><th>Price</th></thead><tbody>";
// output the type, quantity and price of each array element
var length = theArray.length; // get array's length once before loop
var type = ["Deluxe Room", "Spa Room", "Penthouse Suite"];
for ( var i = 0; i < type.length; ++i )
if(theArray[i] == theArray[0])
{
content += "<tr><td>" + type[i] + "</td><td>" + theArray[i] + "</td><td>" + "$"+ (theArray[0] * 150.00) + "</td></tr>";
}
else if(theArray[i] == theArray[1])
{
content += "<tr><td>" + type[i] + "</td><td>" + theArray[i] + "</td><td>" + "$"+ (theArray[1] * 220.00) + "</td></tr>";
}
else if(theArray[i] == theArray[2])
{
content += "<tr><td>" + type[i] + "</td><td>" + theArray[i] + "</td><td>" + "$"+ (theArray[2] * 450.00) + "</td></tr>";
}
else
{
content += "<tr><td>" + type[i] + "</td><td>" + theArray[i] + "</td><td>" + "$"+ (theArray[i] * 0.00) + "</td></tr>";
}
content += "</tbody></table>";
output.innerHTML = content; // place the table in the output element
}
window.addEventListener( "onclick", QtyVal, false );
function CkInVal()
{
var In = document.getElementById("ckIn").value;
var Out = document.getElementById("ckOut").value;
var today = new Date();
if ( In < today )
{
text = "Please select today's date or later";
}
else
{
text = "Select a check out date";
}
document.getElementById("ckDay").innerHTML = text;
}
function CkOutVal()
{
var In = document.getElementById("ckIn").value;
var Out = document.getElementById("ckOut").value;
if (Out <= In)
{
text = "Check out must be a day or later past the check in date";
}
else
{
text = "Your Stay is from " + In + " to " + Out;
}
document.getElementById("ckDay").innerHTML = text;
}
function CalcTotals(theArray, output)
{
var content = "<table>" + "<thead><th>Days</th><th>Total</th></thead><tbody>";
var length = theArray.length;
var x = [ , ];
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds in a day
var firstDate = new Date(document.getElementById("ckIn").value);
var secondDate = new Date(document.getElementById("ckOut").value);
var Daydiff = Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay));
for ( var i = 0; i < x.length; ++i )
{
content += "<tr><td>" + Daydiff + "</td><td>" + + "</td></tr>";
} // end for
content += "</tbody></table>";
output.innerHTML = content;
}
window.addEventListener( "onclick", QtyVal, false );
<html>
<head>
<meta charset = "utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="javascript.js"></script>
<title>Rooms and Rates</title>
</head>
<body>
<header>
<div align = "center">
<h1> Monte Carlo Hotel </h1>
</div>
<img src = "Images/Monte Carlo 1.jpg"
alt = "Monte Carlo Hotel"
align = "left"/>
<br><h4>Monte Carlo
<br>3770 Las Vegas Blvd.
<br>Las Vegas, NV 89109
<br>(702) 730-7777</h4>
<a href = "Index.html">
<div class = "icon">
Home
</div></a>
<a href="Amenities.html">
<div class = "icon">
Amenities/Facilities
</div></a>
<a href = "Entertainment.html">
<div class = "icon">
Entertainment
</div></a>
<a href = "Membership.html">
<div class = "icon">
Membership
</div></a>
</header>
<table>
<tr>
<th>Room Type</th>
<th>View</th>
<th>Description</th>
<th>Rate</th>
<th>No. of Rooms</th>
</tr>
<tr><form id = "bookform">
<td align = "center" class = "RmType" value = "Deluxe Room">Deluxe Rooms</td>
<td><img src = "http://img.lasvegasdirect.com/aria-city-center-las-vegas-deluxe-room-02.jpg"
alt = "deluxe room"
align = "center"/>
</td>
<td>You'll find everything you need for an enjoyable stay, including your choice of one king or two queen beds with pillow top mattresses,
crisp sheets, fresh and fluffy white bedding, contemporary accents, and all the amenities to make your stay comfortable and convenient.
<ul>
<li>40 Inch HD TV</li>
<li>Cable TV</li>
<li>Italian Marble Enrty & Bathrooms</li>
<li>Bath and Body Products</li>
<li>Mini Fridge</li>
<li>Iron & Ironing Board</li>
</ul>
</td>
<td>$150/night</td>
<td colspan = "3">
<input type = "number" id = "qty1" min = "1" max = "8">
</td>
</tr>
<tr>
<td align = "center">Spa Rooms</td>
<td><img src = "http://www.montecarlo.com/images/rooms/Spa-suite.jpg"
alt = "spa room"
align = "center"/>
</td>
<td>Need a little break from all the excitement? You won't have to go far when you're staying in one of our Spa Rooms.
Release yourself to your personal oasis in a hydrotherapy whirlpool tub. Relaxtion is just a door turn away.
<ul>
<li>Italian Marble Bath</li>
<li>Seperate Rainforest Style Shower</li>
<li>Seperate Sitting Area</li>
<li>Wet bar and Fridge</li>
<li>40 Inch HD w/ Cable</li>
<li>Bath and Body Products</li>
<li>Iron & Ironing Board</li>
</ul>
</td>
<td>$220/night</td>
<td colspan = "3">
<input type = "number" id = "qty2" min = "1" max = "8">
</td>
</tr>
<tr>
<td align = "center" class = "RmType" value = "Penthouse">Penthouse Suite</td>
<td><img src = "http://condohotelcenter.com/images/martin-Home%20Four%208795%20(2).jpg"
alt = "penthouse"
align = "center"/>
</td>
<td>Live life to the fullest at the top. Indulge in this home away from with endless pampering,
perks and suite assistants that will wait on you hand and foot. Discover exclusive living.
<ul>
<li>2000 sq. ft.</li>
<li>Entertainment room w/ pool table</li>
<li>HD TVs throughout the suite</li>
<li>Wet bar and prestocked fridge per your requests</li>
<li>Master and 2nd bedroom with Ultra King</li>
<li>Huge Kohler Chromatherapy steam shower</li>
<li>15" in-mirror integrated TV in master bath</li>
<li>Hydrotherapy soaking tub</li>
<li>Additional 1/2 bath</li>
<p><b>Note: Due to limited availability, guests are only allowed to book one Penthouse Suite per stay.</b></p>
</ul>
</td>
<td>$450/night</td>
<td colspan = "3" >
<input type = "number" name = "Penthouse" id = "qty3" min = "1" max = "1">
</td>
</tr>
</table>
<div align = "middle">
<br><br>Check In Date:
<input type = "date" onChange = "CkInVal()" id = "ckIn" >
Check Out Date:
<input type = "date" onChange = "CkOutVal()" id = "ckOut" >
<p></p>
<button type = "button" onClick ="QtyVal(); CalcPrice()">SUBMIT</button>
<br><br>
<button type = "reset" id = "rst">Reset</button>
<p id = "ckDay"></p> <p id = "book"></p>
</div>
<br>
<div align = "middle" id = "results"></div>
<div align = "middle" id = "totals"></div>
</form>
<footer align = "center">
<br><a href = "Index.html">Homepage</a> | <a href = "Amenities.html">Amenities</a> | <a href = "Entertainment.html">Entertainment</a> | <a href = "Membership.html">Membership/Comments</a>
<br><br>3770 Las Vegas Blvd. Las Vegas, NV 89109
<br>Email Us: <a href = "mailto:montecarlolasvegas@aol.com">montecarlolasvegas@aol.com</a>.
<br>Phone: (702) 730-7777
<br>Fax: (702) 703-7878
<br>Copyright © 2015 MGM Resorts International. All rights reserved.
</footer>
</body>
</html>
您可以计算outputArray
中房间的价格、类型和数量。只需在outputArray
的末尾调用CalcTotals
,而不是QtyVal
。您可以将outputArray
所需的信息作为参数。如果你想在相同的时间内预订每个房间,如果必要的话,你可以通过为所有三种类型的房间添加的type * price * number
,让CalcTotals
计算天数,并将其与outputArray
的参数之和相乘。
我希望这个解释不太糟糕?
相关文章:
- 如何将具有相同功能的两个select html标签的两个JS组合在一起
- 不同对象之间的递归,并将它们唯一地组合在一起,不重复
- 在ASP.NET MVC3中将多个视图组合在一起
- 将json值组合在一起并创建csv
- Meteor 与 Session.set 和 jQuery 在一个调用中组合在一起
- jQuery、jQuery UI和jQuery Mobile如何组合在一起
- 是否可以将相同属性的元素与 querySelectorAll 组合在一起
- 在 jQuery 中将多个函数与相同的代码组合在一起
- 将图像组合在一起并在窗口加载时对图像进行动画处理
- 将“if/then.else”语句与“switch”语句组合在一起
- 如何将两个函数的代码与不同的参数组合在一起
- 是否可以在javascript中将for循环与setTimeOut组合在一起
- 将两个正则表达式组合在一起
- 在 JavaScript 中用多个分隔符拆分公式字符串,并保留分隔符,然后将字符串重新组合在一起
- 按字母表列出,将条目较少的字母组合在一起(PHP或JS)
- 将两个对象与多个节点组合在一起——为什么这段代码有效
- 将这些脚本组合在一起工作,Javascript/AAJAX和PHP
- 在PaperJS中,可以将多个项目组合在一起,使它们作为一个项目移动
- jQuery循环将多个数组组合在一起-Mapbox-map.setFilter()
- JS的新手,尝试将Rock Paper Scissors游戏组合在一起