Как новичку в JS, мне нужна помощь в следующем: я хочу создать маленькую трехэтапную программу:

  1. позволить пользователю выбрать список из списка выбора (фрукты или овощи)
  2. позволить пользователю выбрать количество элементов (х), которые он хочет увидеть
  3. показать х предметов фруктов или овощей

Как вы видите, шаги 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>
1
Bee 4 Мар 2018 в 14:43

3 ответа

Лучший ответ

Это должно помочь:

// 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>
1
oniondomes 4 Мар 2018 в 12:08

Вы можете получить текущее значение следующим образом:

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>
2
tapok 4 Мар 2018 в 12:07
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>
1
Ahmad 4 Мар 2018 в 12:00