0
當我的代碼運行時，您可以看到當用戶輸入房間數量，選擇入住和結帳日期並點擊提交時，會出現一個表格，其中包含房間名稱，爲選定房間輸入的數量和價格根據房間數量而定。此外，還會顯示另一個表格，其中包含登記入住天數和總數。總數假設是天數乘以價格。是否可以將獨立函數的數組組合在一起？
出現的第一個表是使用下面的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;
\t z = document.getElementById("qty3").value;
\t \t if (y < 1 || y > 8)
\t \t \t \t {
\t \t \t \t \t text = "please enter quantity from 1 to 8";
\t \t \t \t }
\t \t \t else if (x < 1 || x > 8)
\t \t \t \t {
\t \t \t \t \t text = "please enter quantity from 1 to 8";
\t \t \t \t }
\t \t else if (z > 1 || isNaN(z))
\t \t \t \t {
\t \t \t \t \t text = "Due to limited availability, " +
\t \t \t \t \t \t "guests are only allowed to " +
\t \t \t \t \t "book one Penthouse Suite per stay";
}
else if (x == '' && y == '' && z == '')
\t {
\t \t text = "Please select a room";
\t \t }
else
{
\t \t \t \t text = "";
\t \t \t \t \t var n1 = new Array(); // allocate empty array
var n2 = new Array(); // allocate another empty array
n1.push(document.getElementById("qty1").value);
\t \t \t \t \t n1.push(document.getElementById("qty2").value);
\t \t \t \t \t n1.push(document.getElementById("qty3").value);
outputArray(n1, document.getElementById("results"));
CalcTotals(n2, document.getElementById("totals"));
\t \t \t \t }
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])
\t \t {
\t \t content += "<tr><td>" + type[i] + "</td><td>" + theArray[i] + "</td><td>" + "$"+ (theArray[0] * 150.00) + "</td></tr>";
}
\t else if(theArray[i] == theArray[1])
\t \t {
\t \t \t content += "<tr><td>" + type[i] + "</td><td>" + theArray[i] + "</td><td>" + "$"+ (theArray[1] * 220.00) + "</td></tr>";
\t \t }
\t \t else if(theArray[i] == theArray[2])
\t \t {
\t \t \t content += "<tr><td>" + type[i] + "</td><td>" + theArray[i] + "</td><td>" + "$"+ (theArray[2] * 450.00) + "</td></tr>";
\t \t }
\t \t else
\t \t {
\t \t \t content += "<tr><td>" + type[i] + "</td><td>" + theArray[i] + "</td><td>" + "$"+ (theArray[i] * 0.00) + "</td></tr>";
\t \t }
content += "</tbody></table>";
output.innerHTML = content; // place the table in the output element
}
window.addEventListener("onclick", QtyVal, false);
function CkInVal()
{
\t var In = document.getElementById("ckIn").value;
\t var Out = document.getElementById("ckOut").value;
\t var today = new Date();
if (In < today)
\t \t {
\t \t text = "Please select today's date or later";
\t }
else
\t {
\t text = "Select a check out date";
\t }
document.getElementById("ckDay").innerHTML = text;
}
function CkOutVal()
{
\t var In = document.getElementById("ckIn").value;
\t var Out = document.getElementById("ckOut").value;
\t if (Out <= In)
\t {
\t \t text = "Check out must be a day or later past the check in date";
\t }
\t else
\t {
\t \t text = "Your Stay is from " + In + " to " + Out;
\t }
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; \t // 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>
\t <head>
\t \t <meta charset = "utf-8">
\t \t <link rel="stylesheet" type="text/css" href="style.css" />
\t \t <script src="javascript.js"></script>
\t \t <title>Rooms and Rates</title>
\t </head>
\t <body>
\t <header>
\t \t <div align = "center">
\t \t <h1> Monte Carlo Hotel </h1>
\t \t </div>
\t \t \t <img src = "Images/Monte Carlo 1.jpg"
\t \t \t \t alt = "Monte Carlo Hotel"
\t \t align = "left"/>
\t \t \t <br><h4>Monte Carlo
\t \t \t <br>3770 Las Vegas Blvd.
\t \t \t <br>Las Vegas, NV 89109
\t \t \t <br>(702) 730-7777</h4>
\t \t \t <a href = "Index.html">
\t \t \t <div class = "icon">
\t \t \t \t Home
\t \t \t </div></a>
\t \t \t <a href="Amenities.html">
\t \t \t <div class = "icon">
\t \t \t \t Amenities/Facilities
\t \t \t </div></a>
\t \t \t <a href = "Entertainment.html">
\t \t <div class = "icon">
\t \t \t \t Entertainment
\t \t \t </div></a>
\t \t \t <a href = "Membership.html">
\t \t \t <div class = "icon">
\t \t \t \t Membership
</div></a>
\t </header>
\t <table>
\t \t <tr>
\t \t <th>Room Type</th>
\t \t <th>View</th>
\t \t <th>Description</th>
\t \t \t <th>Rate</th>
\t \t \t <th>No. of Rooms</th>
\t \t </tr>
\t \t <tr><form id = "bookform">
\t \t \t <td align = "center" class = "RmType" value = "Deluxe Room">Deluxe Rooms</td>
\t \t \t <td><img src = "http://img.lasvegasdirect.com/aria-city-center-las-vegas-deluxe-room-02.jpg"
\t \t \t \t \t \t alt = "deluxe room"
\t \t \t \t \t \t align = "center"/>
\t \t \t \t </td>
\t \t \t <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,
\t \t \t crisp sheets, fresh and fluffy white bedding, contemporary accents, and all the amenities to make your stay comfortable and convenient.
\t \t \t <ul>
\t \t \t \t <li>40 Inch HD TV</li>
\t \t \t \t <li>Cable TV</li>
\t \t \t \t <li>Italian Marble Enrty & Bathrooms</li>
\t \t \t \t <li>Bath and Body Products</li>
\t \t \t \t <li>Mini Fridge</li>
\t \t \t \t <li>Iron & Ironing Board</li>
\t \t \t </ul>
\t \t \t </td>
\t \t \t <td>$150/night</td>
\t \t \t <td colspan = "3">
\t \t \t \t <input type = "number" id = "qty1" min = "1" max = "8">
\t \t \t </td>
\t \t </tr>
\t \t <tr>
\t \t <td align = "center">Spa Rooms</td>
\t \t <td><img src = "http://www.montecarlo.com/images/rooms/Spa-suite.jpg"
\t \t \t \t \t \t alt = "spa room"
\t \t \t \t \t \t align = "center"/>
\t \t \t </td>
\t \t <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.
\t \t \t Release yourself to your personal oasis in a hydrotherapy whirlpool tub. Relaxtion is just a door turn away.
\t \t \t <ul>
\t \t \t <li>Italian Marble Bath</li>
\t \t \t \t <li>Seperate Rainforest Style Shower</li>
\t \t \t \t <li>Seperate Sitting Area</li>
\t \t \t \t <li>Wet bar and Fridge</li>
\t \t \t \t <li>40 Inch HD w/ Cable</li>
\t \t \t \t <li>Bath and Body Products</li>
\t \t \t \t <li>Iron & Ironing Board</li>
\t \t \t </ul>
\t \t \t </td>
\t \t \t <td>$220/night</td>
\t \t \t <td colspan = "3">
\t \t \t \t <input type = "number" id = "qty2" min = "1" max = "8">
\t \t \t </td>
\t \t </tr>
\t \t <tr>
\t \t \t <td align = "center" class = "RmType" value = "Penthouse">Penthouse Suite</td>
\t \t \t <td><img src = "http://condohotelcenter.com/images/martin-Home%20Four%208795%20(2).jpg"
\t \t \t \t \t \t alt = "penthouse"
\t \t \t \t \t \t align = "center"/>
\t \t \t \t </td>
\t \t \t <td>Live life to the fullest at the top. Indulge in this home away from with endless pampering,
\t \t \t perks and suite assistants that will wait on you hand and foot. Discover exclusive living.
\t \t \t <ul>
\t \t \t \t <li>2000 sq. ft.</li>
\t \t \t \t <li>Entertainment room w/ pool table</li>
\t \t \t \t <li>HD TVs throughout the suite</li>
\t \t \t \t <li>Wet bar and prestocked fridge per your requests</li>
\t \t \t \t <li>Master and 2nd bedroom with Ultra King</li>
\t \t \t \t <li>Huge Kohler Chromatherapy steam shower</li>
\t \t \t \t <li>15" in-mirror integrated TV in master bath</li>
\t \t \t \t <li>Hydrotherapy soaking tub</li>
\t \t \t \t <li>Additional 1/2 bath</li>
\t \t \t \t <p><b>Note: Due to limited availability, guests are only allowed to book one Penthouse Suite per stay.</b></p>
\t \t \t </ul>
\t \t \t </td>
\t \t \t <td>$450/night</td>
\t \t \t <td colspan = "3" >
\t \t \t \t <input type = "number" name = "Penthouse" id = "qty3" min = "1" max = "1">
\t \t </td>
\t \t </tr>
\t </table>
\t \t <div align = "middle">
\t \t <br><br>Check In Date:
\t \t \t <input type = "date" onChange = "CkInVal()" id = "ckIn" >
\t \t \t \t Check Out Date:
\t \t \t <input type = "date" onChange = "CkOutVal()" id = "ckOut" >
\t \t \t <p></p>
\t \t \t \t <button type = "button" onClick ="QtyVal(); CalcPrice()">SUBMIT</button>
\t \t \t \t <br><br>
\t \t \t \t <button type = "reset" id = "rst">Reset</button>
\t \t \t \t <p id = "ckDay"></p> <p id = "book"></p>
\t \t \t </div>
\t \t \t <br>
\t \t <div align = "middle" id = "results"></div>
\t \t <div align = "middle" id = "totals"></div>
</form>
\t <footer align = "center">
\t \t \t <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>
\t \t \t <br><br>3770 Las Vegas Blvd. Las Vegas, NV 89109
\t \t \t <br>Email Us: <a href = "mailto:[email protected]">[email protected]</a>.
\t \t \t <br>Phone: (702) 730-7777
\t \t \t <br>Fax: (702) 703-7878
\t \t \t <br>Copyright © 2015 MGM Resorts International. All rights reserved.
</footer>
\t </body>
</html>
'CalcTotals'需要兩個 - 房間數量和時間。另外我會將計算與輸出的生成分開。首先進行所有計算並將結果放入一個對象中。然後將其傳遞給生成html的函數。 – SpiderPig