简体   繁体   中英

Allow user to select how many times to run a function

I am very new to javascript. I have already created a random menu generator where an item from each of 3 arrays is randomly selected (arrays are main, dessert, beverage). So when you click a "create order" button you are given a randomly generated list (pizza, ice cream, beer etc.). But now I want to add the option of choosing between 1 and 10 menus, so if the user had 4 people in their party they could select "4" and there would be 4 randomly generated orders. So I need to run the function the number of times that the user inputs.

Right now my div and button look like this:

<div class="order">
<h3 id="orderDisplay">
<!--this is where order will display-->
</h3>
</div>

<button onClick="order()">Click to generate order</button>

So then to allow a user to select the number of orders I have started this:

var(numOrders) = prompt("How many orders would you like to place?") switch (document.getElementById(numOrders)) {

case "1": document.getElementById('orderDisplay').innerHTML = (menuOne[randomMenuOne] + MenuTwo[randomMenuTwo] + menuThree[randomMenuThree];);

case "2": I am not sure how to format this. I need to run the function "menu"

Also, I want a dropdown so the user can choose 1-10, not a prompt.

Sorry I know it's a lot. I just can't find a good tutorial and I am not even sure what to google for.

One way to get the result you're wanting is to wrap a "for loop" around your function, where "peopleInParty" is the # of people the user selected for their party, and "yourFunction()" being the function you're wanting to run X amount of times.

for (int x = 0; x < peopleInParty; x++) {
    yourFunction();
}

There is much more than one way to do this.

Try to understand this:

 i = 0 do console.log("Cooking pizza: "+i),i++ while (i<input.value) 
 <input id="input" value="12" /> 

This is do while loop . See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while

One other way is to use a for loop . See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

It'd be better to see an example of your code. But just going off of your description, let's say you have three arrays, similar to:

var main = ["chicken", "beef", "pork", "fish", "veggie"];
var dessert = ["cake", "ice cream", "pie", "cupcake", "jello"];
var beverage = ["pop", "beer", "water", "whiskey", "juice"];

You can create a function that will generate a menu from these arrays by randomly selecting one element from each array. You can wrap that in a for loop to do that however many times you'd like.

For example:

function createMenu(numberOfMenus) {

  var menus = {};  // Object to hold the menus

  for (var i = 0; i < numberOfMenus; i++) {  // Repeat numberofMenus times

    // Randomly select an element from each array
    var m = main[Math.floor(Math.random() * main.length)];
    var d = dessert[Math.floor(Math.random() * dessert.length)];
    var b = beverage[Math.floor(Math.random() * beverage.length)];

    // Add menu to menus object
    menus[i] = [m, d, b];

  }

  // Return the menus object
  return menus;

}

You can then prompt the user for the number of menus they'd like to create, call the function with that number as the input parameter, and do whatever you'd like with the result. Something like:

var p = prompt("How many menus?");
console.log(createMenu(p));

The main idea here is to use a for loop to repeat the menu selection process as many times as you'd like, and to use a function as a form of reusable code to perform the task.

Hope this helps.

Here is a code snippet that may help you.

When you click button function orderBtnClick is fired. You are asked about how many order you want to generate using prompt window, then you execute repeat function that takes number of repetition and delegate to the function that you want repeat.

 function orderBtnClick() { var numberOfOrders = prompt("How many orders you want to generate?"); repeat(numberOfOrders, orderGenerator) } function repeat(times, fcn) { for (var i = 0; i < times; i++) { fcn(); } } function orderGenerator() { //your code here console.log("Order generated!"); } 
 <button onclick="orderBtnClick()" type="button"> Order! </button> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM