时间戳

首页 > 解决方案 > 如何将数组中的随机元素添加到另一个空白数组？

javascript - 如何将数组中的随机元素添加到另一个空白数组？

问题描述

我想用 javascript 创建一个简单的餐厅菜单。首先，菜单将显示 5 道菜（存储在数组“men​​u”中）。然后，当我单击“订购”按钮时，阵列“菜单”中的随机菜肴将在“订购”行中一一显示，同时我不断单击它。为此，我生成了 0-4 的随机数，并创建了第二个空白数组“订单”并创建 DOM 对象以在 HTML 行中一一写入“订单”数组的元素。代码如下

const menu = ["Steak", "Potato", "Hamburger", "Salad", "Cheesecake"];
let show_menu = document.querySelector("#menu");
let show_orders = document.querySelector("#orders");
for (let i = 0; i <= menu.length; i++) {
  if (menu[i] != undefined) {
    show_menu.textContent += ` 　　　　 ${menu[i]}`;
  }
}

function chuumon() {
  let orders = [];
  let a = Math.floor(Math.random() * 5);
  document.querySelector("#num").textContent = a;
  orders.push(menu[a]);
  show_orders.textContent = orders[a];
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>restaurant order</title>
</head>

<body>
  <h4>Menu</h4>
  <span id="menu"></span>
  <hr> Orders:
  <span id="orders"></span><br>
  <span id="num"></span>
  <button onclick="chuumon()">Order</button>
</body>

</html>

问题是当我点击“订单”行中的“订单”按钮时，它只显示element[0]数组，menu否则它什么也不显示。

我的push()方法有什么问题？( orders.push(menu[a]))

现在我想设置一个事件，当点击“上菜”按钮时，“订单”行中的菜将被一一删除。因此，我设置了另一个函数“Teikyo()”来使用function_name.shift()方法，但努力访问函数“chuumon()”中的“Order”数组值。这是我关于这两个函数的代码。谁能建议我如何访问其他函数的属性？

function chuumon() {
let a = Math.floor(Math.random() * 5);
show_orders.textContent = menu.join(",");
orders.push(menu[a]);
show_orders.textContent = orders;
last_order.textContent = orders[orders.length - 1]
   }
function teikyo()
  {
chuumon().orders.shift();
show_orders.textContent = orders;
  }

标签： javascripthtml

解决方案

正确推送数组并没有错orders.push(menu[a])，但是，您实际上并不需要orders.push(menu[a])它，因为每次调用该函数时都在启动它。

你可以简单地做：

function chuumon() {
  let a = Math.floor(Math.random() * 5);
  document.querySelector("#num").textContent = a;
  show_orders.textContent = menu[a];
}


const menu = ["Steak", "Potato", "Hamburger", "Salad", "Cheesecake"];

let show_menu = document.querySelector("#menu");
let show_orders = document.querySelector("#orders");
for (let i = 0; i <= menu.length; i++) {
  if (menu[i] != undefined) {
    show_menu.textContent += ` 　　　　 ${menu[i]}`;
  }
}

function chuumon() {
  let a = Math.floor(Math.random() * 5);
  document.querySelector("#num").textContent = a;
  show_orders.textContent = menu[a];
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>restaurant order</title>
</head>

<body>
  <h4>Menu</h4>
  <span id="menu"></span>
  <hr> Orders:
  <span id="orders"></span><br>
  <span id="num"></span>
  <button onclick="chuumon()">Order</button>
</body>

</html>

或者，如果您想在该数组上推送某些内容并进行跟踪，则需要在函数之外声明它。

const menu = ["Steak", "Potato", "Hamburger", "Salad", "Cheesecake"];
let orders = [];
let show_menu = document.querySelector("#menu");
let show_orders = document.querySelector("#orders");
let show_order = document.querySelector("#order");
for (let i = 0; i <= menu.length; i++) {
  if (menu[i] != undefined) {
    show_menu.textContent += ` 　　　　 ${menu[i]}`;
  }
}

function chuumon() {
  let a = Math.floor(Math.random() * 5);
  document.querySelector("#num").textContent = a;
  show_orders.textContent = menu[a];
  orders.push(menu[a]);
  show_orders.textContent = orders;
  show_order.textContent = orders[orders.length - 1]
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>restaurant order</title>
</head>

<body>
  <h4>Menu</h4>
  <span id="menu"></span>
  <hr> Orders:
  <span id="orders"></span><br>
  <span id="num"></span>
  <hr> Last Order:
  <span id="order"></span><br>
  <button onclick="chuumon()">Order</button>
</body>

</html>

推荐阅读