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

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>

Answer 2

您可以像这样获得当前值：

let selectList = document.getElementById("selectList");
let currentValue;
selectList.addEventListener("change", function(e){
    currentValue = e.target.value;
    console.log(currentValue);
});

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

Answer 3

var fruits = ['apple', 'banana', 'cherry', 'orange', 'watermelon', 'lemon'];
var veggies = ['carrots', 'eggplant', 'pumpkin', 'tomateos', 'potatoes'];



$('#btn').click(function() {
  var choice = $('#food').val();
  var count = $('#txt_number').val();
  
  get_food(choice, count);

});

function get_food(choice, count) {
  $('#result').html('');

  for (var i = 0; i < count; i++) {
    $('#result').append((choice == 'fruit') ? fruits[i] : veggies[i]).append(" ");
  }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id='food'>
  <option value='fruit'>Fruits</option>
  <option value='veggies'>Vegetables</option>
 </select>


<input type='text' id='txt_number' />

<button id='btn'>Get food</button>

<div id='result'></div>