可以将单独函数的数组值组合在一起吗

Is It Possible to Combine Array Values from Separate Functions Together?

本文关键字:组合 在一起 数组 单独 函数      更新时间:2023-09-26

运行我的代码时,您可以看到,当用户输入房间的数量,选择入住和退房日期并点击提交时,会出现一个表格,其中包含房间名称、为所选房间输入的数量和基于房间数目的价格。此外,还会显示另一个表,其中包含从签入到签出的天数和总数。"总计"假定为天数乘以价格。

出现的第一个表是使用下面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 &copy; 2015 MGM Resorts International. All rights reserved.
        </footer>
	</body>
</html>

您可以计算outputArray中房间的价格、类型和数量。只需在outputArray的末尾调用CalcTotals,而不是QtyVal。您可以将outputArray所需的信息作为参数。如果你想在相同的时间内预订每个房间,如果必要的话,你可以通过为所有三种类型的房间添加的type * price * number,让CalcTotals计算天数,并将其与outputArray的参数之和相乘。

我希望这个解释不太糟糕?