允许用户选择运行函数的次数

时间:2018-01-29 18:45:09

标签: javascript

我是javascript的新手。我已经创建了一个随机菜单生成器,其中随机选择3个阵列中的每一个的项目(数组是主要的,甜点,饮料)。所以当你点击"创建订单"按钮,您将获得一个随机生成的列表(比萨饼,冰淇淋,啤酒等)。但现在我想添加选择1到10个菜单的选项,因此如果用户在他们的聚会中有4个人,他们可以选择" 4"并且会有4个随机生成的订单。所以我需要运行该功能用户输入的次数。

现在我的div和按钮看起来像这样:

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

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

然后允许用户选择我开始的订单数量:

var(numOrders)=提示符(&#34;您想要下多少个订单?&#34;)    switch(document.getElementById(numOrders)){

案例&#34; 1&#34;:    document.getElementById(&#39; orderDisplay&#39;)。innerHTML =(menuOne [randomMenuOne] +    MenuTwo [randomMenuTwo] + menuThree [randomMenuThree];);

case&#34; 2&#34;:我不知道如何格式化这个。我需要运行功能&#34; menu&#34;

另外,我想要一个下拉列表,以便用户可以选择1-10,而不是提示。

抱歉,我知道很多。我无法找到一个好的教程,我甚至不确定要谷歌的用途。

4 个答案:

答案 0 :(得分:1)

获得你想要的结果的一种方法是包装一个&#34; for循环&#34;围绕你的功能,在哪里&#34; peopleInParty&#34;是用户为其派对选择的人数,以及&#34; yourFunction()&#34;是你想要运行X次的功能。

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

答案 1 :(得分:1)

实现这一目标的方法不止一种。

尝试理解这一点:

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

执行循环。见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while

另一种方法是使用 for循环。见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

答案 2 :(得分:0)

最好看一下你的代码示例。但是,仅仅关闭你的描述,让我们说你有三个数组,类似于:

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

您可以通过从每个数组中随机选择一个元素来创建一个从这些数组生成菜单的函数。您可以将其包含在for循环中以执行此操作,无论您喜欢多次。

例如:

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;

}

然后,您可以提示用户输入他们想要创建的菜单数量,使用该数字作为输入参数调用该功能,并根据结果执行任何操作。类似的东西:

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

这里的主要想法是使用for循环来重复菜单选择过程多次,并使用function作为可重用代码的形式执行任务。

希望这有帮助。

答案 3 :(得分:0)

以下是可能对您有所帮助的代码段。

单击按钮功能时, orderBtnClick 会被触发。系统会询问您要使用提示窗口生成多少订单,然后执行重复功能,该功能需要重复次数并委托给您想要重复的功能。

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>