是否可以将来自不同函数的数组值组合在一起？答案

【问题标题】：Is It Possible to Combine Array Values from Separate Functions Together?是否可以将来自不同函数的数组值组合在一起？
【发布时间】：2015-11-08 04:10:35
【问题描述】：

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

出现的第一个表是使用下面 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>

【问题讨论】：

CalcTotals 两者都需要 - 房间数量和时间。此外，我会将计算与输出的生成分开。首先进行所有计算并将结果放入一个对象中。然后将其传递给生成 html 的函数。

标签： javascript html arrays function

【解决方案1】：

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

我希望这不是太糟糕的解释？

【讨论】：