javascript - 使用选定的选项作为函数内的参数

Question

作为 JS 新手，我需要以下方面的帮助: 我想创建一个 3 步小程序:

1. 让用户从选择框中选择列表(水果或蔬菜)
2. 让用户选择他想看到的项目数 (x)
3. 显示 x 种水果或蔬菜

如您所见，第 2 步和第 3 步运行良好， 我的问题是关于第 1 步:

如何将选定的选项作为参数传递给函数，就像第二个参数(元素数)由用户输入的数字设置一样。

欢迎所有帮助。提前谢谢你。

// The arrays to choose
var fruit = ['Apple', 'Banana', 'Mango', 'Apricot'];
var vegetable = ['Brussels sprout', 'Broccoli', 'Potato', 'Tomato']

///////////////////// RANDOM ARRAY ELEMENT SELECTION

function getRandomArrayElements(arr, a) {
    var shuffled = arr.slice(0), i = arr.length, min = i - a, temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
}

// use an eventlistener for the click event
var genElementsdBtn = document.getElementById('genBtn');
genElementsdBtn.addEventListener('click', getElements, false);

function getElements() {
    document.getElementById('result').innerHTML = 
    getRandomArrayElements(fruit, a.value).join("   ");
    /* document.getElementById('divalert').className = 'show'; */   
}

.wrapper {width:320px; margin: 0 auto}
select, label, button, input, div  {
  width:100%; 
  height:45px;
  margin:16px 0;
 }
 

<div class="wrapper">
<select id="selectList">
  <option value="">choose your array</option> 
  <option value="fruit" id="fruit">fruit</option>
  <option value="vegetables" id="vegetables">vegetables</option>
</select>

<label>select number of random elements from the chosen list</label>

<input type="number" placeholder="set a number" id="a"><br>
<button id='genBtn' type='button'>generate random array elements</button>

<div id="result"></div>
</div>

Answer 1

这应该有帮助:

// The arrays to choose
const types = {
  fruit: ['Apple', 'Banana', 'Mango', 'Apricot'],
  vegetables: ['Brussels sprout', 'Broccoli', 'Potato', 'Tomato'],
};
const output = document.getElementById('result');
const typeSelect = document.getElementById('selectList');
const number = document.getElementById('a');
const genElementsdBtn = document.getElementById('genBtn');
///////////////////// RANDOM ARRAY ELEMENT SELECTION

function getRandomArrayElements(arr, a) {
  console.log(arr, a);
  var shuffled = arr.slice(0),
    i = arr.length,
    min = i - a,
    temp, index;
  while (i-- > min) {
    index = Math.floor((i + 1) * Math.random());
    temp = shuffled[index];
    shuffled[index] = shuffled[i];
    shuffled[i] = temp;
  }
  return shuffled.slice(min);
}

// use an eventlistener for the click event
genElementsdBtn.addEventListener('click', getElements, false);

function getElements() {
  const selected = typeSelect.options[typeSelect.selectedIndex].value;
  const quantity = number.value;
  if (selected && quantity) {
    output.innerHTML = getRandomArrayElements(types[selected], quantity).join("   ");
  }
}

.wrapper {
  width: 320px;
  margin: 0 auto
}

select,
label,
button,
input,
div {
  width: 100%;
  height: 45px;
  margin: 16px 0;
}

<div class="wrapper">
  <select id="selectList">
  <option value="">choose your array</option> 
  <option value="fruit" id="fruit">fruit</option>
  <option value="vegetables" id="vegetables">vegetables</option>
</select>

  <label>select number of random elements from the chosen list</label>

  <input type="number" placeholder="set a number" id="a"><br>
  <button id='genBtn' type='button'>generate random array elements</button>

  <div id="result"></div>
</div>