use selected option as argument inside a function

Question

As a JS novice I need some help with the following: I want to create a 3-steps little program:

let user choose list from a selectbox (fruit or vegetables)
let user choose the number of items (x) he wants to see
show x items of fruit or vegetables

As you can see, step 2 and 3 are working just fine, My question is about step 1:

how can I pass the selected option in as an argument in the function, just as the second argument (number of elements) is set by the number from the users input.

All help is welcome. Thank you in advance.

// 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>

You are not using SelectList anywhere in your javascript, you need to get its selected value selectList[selectList.selectedIndex].value; — SSD, Mar 04 '18 at 12:05

score 1 · Answer 1 · answered Mar 04 '18 at 12:00

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>

Thank you Ahmad. This clearly works, accept I wish to acompliosh this using pure javascript. Do you see the chace to translate the jquery answer? thanks!!! — BeesWax, Mar 04 '18 at 12:03

score 1 · Answer 2 · answered Mar 04 '18 at 12:07

1

You can get current value like this:

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>

answered Mar 04 '18 at 12:07

tapok

15
1
7

This also helps a lot. Thank you Tapok. – BeesWax Mar 04 '18 at 12:13
I can't yet, to green :) – BeesWax Mar 04 '18 at 12:15

score 1 · Accepted Answer · answered Mar 04 '18 at 12:08

This should help:

// 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>

@Bee, btw avoid accessing DOM elements directly by its id as a `document` property (here: `getRandomArrayElements(fruit, a.value)`). Use `getElementById()`-like functions. Read more: https://stackoverflow.com/questions/25325221/why-dont-we-just-use-element-ids-as-identifiers-in-javascript — oniondomes, Mar 04 '18 at 12:19

use selected option as argument inside a function

3 Answers3