需要从javascript

时间:2017-04-27 14:17:45

标签: javascript html

我的阵列:

var mexicanFood = ["Taco Bell", "Beans", "Taco Time", "Buritos", "Chalupa"];

var asianFood = ["Noodles", "Rice", "Sushi", "Fish", "Chicken"];

var americanFood = ["Hot dogs", "Pizza", "Burgers", "Nachos", "Other"];

知道这是从阵列中随机抓取的可能性:

var randomIndex = Math.floor(Math.random() * mexicanFood.length);

我想从每个食物类别中提取一个值。我不希望所有的墨西哥食物价值都成为食物选择的结果。我想随意,但至少要从每个类别中拉出一两个。如何让它进入单选按钮(可能是5个单选按钮),可以用Math.random完成吗?

如果可能的话,也希望它在javascript和html中

编辑:

我基本上想要数组中不同的食物类别。然后从类别中提取随机值,这些值将被放入单选按钮。我想要创建的整个项目是对餐馆吃饭的投票调查。因此,当我有墨西哥,亚洲,美国和其他随机选择的选项时,我不想要5个汉堡出现。

我坚持的是如何随机拉出每个阵列。我知道如何从一个数组列表中随机拉出。但是,当我有墨西哥食品,亚洲食品和美国食品(甚至更多)时,我不确定如何从这些中随机提取价值并让这些值填充单选按钮

1 个答案:

答案 0 :(得分:1)

我假设您想要返回一系列随机食品,每个类别至少包含1个。

我创建了一个名为createRandomArray()的函数,它接受arraySize。此arraySize指的是您希望在最终数组中拥有的项目数量。

在函数中,我将所有食物数组连接在一起。然后我循环遍历这个数组,为一个新数组添加一个随机索引。

var mexicanFood = ["Taco Bell", "Beans", "Taco Time", "Buritos", "Chalupa"],
    asianFood = ["Noodles", "Rice", "Sushi", "Fish", "Chicken"],
    americanFood = ["Hot dogs", "Pizza", "Burgers", "Nachos", "Other"];
    
function createRandomArray(arraySize) {
    var allFoods = mexicanFood.concat(asianFood).concat(americanFood),
        randomFoods = [];
    
    if (arraySize <= allFoods.length) {
        randomFoods = [
            mexicanFood[getRandomArrayIndex(mexicanFood)],
            asianFood[getRandomArrayIndex(asianFood)],
            americanFood[getRandomArrayIndex(americanFood)]
        ]; // at at least one from each
        
        // remove the ones that were initially added from each
        allFoods.splice(allFoods.indexOf(randomFoods[0]), 1);
        allFoods.splice(allFoods.indexOf(randomFoods[1]), 1);
        allFoods.splice(allFoods.indexOf(randomFoods[2]), 1);
        
        for (var i = 0; i < arraySize - 3; i++) {
            var randomIndex = getRandomArrayIndex(allFoods);
            
            randomFoods.push(allFoods[randomIndex]);
            allFoods.splice(randomIndex, 1);
        }
        
        return randomFoods;
    }
    
    return allFoods; // requesting more items of food than the amount available, so just add them all
}

function getRandomArrayIndex(array) {
    return Math.floor(Math.random() * array.length);
}

var randomFoods = createRandomArray(5);

for (var i = 0; i < randomFoods.length; i++) {
    document.getElementById('food-form').innerHTML += '<input type="radio" name="food" value="' + randomFoods[i] + '"> ' + randomFoods[i] + '<br>';
}
<form action="" id="food-form"></form>