时间戳

首页 > 解决方案 > 从数组中随机选择值而不重复

arrays - 从数组中随机选择值而不重复

问题描述

嗨：我是 Javascript 和 HTML 的新手，自学了一个月。我正在做一个小项目，当我单击一个按钮时，表格中会出现 3 个随机锻炼练习。我将附上我的代码以显示我到目前为止所拥有的内容。

问题：当 for 循环运行时，它会打印 3 次相同的随机选择项目，而不是 3 个不同的项目。

目标：当我单击一个按钮时，该数组会打印 3 个不同的数组值。

var workouts = ['situps', 'planks', 'hollow rock']
var copy = workouts.slice();

var table = '';
var i = 1;

for(var j = 0; j < i; j++)
{
    var answer = copy.splice(Math.floor(Math.random()*workouts.length), 1); 
    table += '<tr>';
    table += '<td>';
    for(var i = 0; i < 1; i++){
        table += answer;
    }
    table += '</td>';
    table += '</tr>';
}

function potato() {
document.getElementById('hi').innerHTML += ('<table border = 1>' + table + '</table>');
}

//Output: Sit ups, Sit ups, Sit ups

标签： arraysfor-looprandom

解决方案

您好，欢迎来到 Stackoverflow。

由于您的 for 循环，您的代码显示相同输出的问题正在发生。您将只进入一次循环，因为i变量是1.

您真正想要做的是拥有与要显示的元素数量一样多的循环。

从数组中显示 3 个唯一且随机的元素的一种方法是：

var workouts = ['situps', 'planks', 'hollow rock'];
var copy = workouts.slice();

var table = '';

for(var j = 0; j < 3; j++) {
  var random = Math.floor(Math.random() * copy.length);
  var answer = copy[random];

  table += '<tr>';
  table += '<td>';
  table += answer;
  table += '</td>';
  table += '</tr>';

  //Removing the selected element so it won't show again.
  copy.splice(random, 1);
}

function potato() {
   document.getElementById('hi').innerHTML += ('<table border = 1>' + table + '</table>');
}

推荐阅读