是否可以将来自单独函数的数组值组合在一起?

时间:2015-11-08 04:10:35

标签: javascript html arrays function

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

出现的第一个表是使用以下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 );
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您可以在outputArray中计算房间的价格,类型和数量。只需在CalcTotals而不是outputArray结束时拨打QtyVal即可向outputArray提供所需的信息作为参数。如果您想在相同的时间内预订每个房间,您可以在必要时为所有三种类型的房间添加type * price * number,并让CalcTotals计算天数并将其乘以给定的总和作为outputArray的论据。

我希望没有解释得那么糟糕?