Reference existing arrays from onChange handler

Question

I have the existing arrays:

var honda = [ 'civic', 'accord' ];
var toyota = [ 'corolla', 'camry' ];

The user has an option to select vehicle makes:

<select id="vehicles">
  <option value="honda">Honda</option>
  <option value="toyota">Toyota</option>
</select>

I add an event listener on change to find their selection:

var vehicleSelect = document.getElementById('vehicles');
vehicleSelect.addEventListener('change', chooseMake, false);

var chooseMake = function() {
  var selected = vehicleSelect.value;
  return selected;
};

My problem: The chooseMake function returns a string. I need a way to pass a reference to either the honda or toyota array into another function, lets say randomizeSelection(chooseMake) that returns a random value from either of the selected arrays.

I already have the randomizer function. I need a way to pass into it, the array that matches the user's selection... instead of the string.

Scott Marcus · Accepted Answer · 2017-01-03 19:21:33Z

The solution here is to place the arrays into an object. This way the array names become accessible as references to the object's properties as strings.

Now, for your random function, you don't really need to separate this from the getting of the array, but per your requirement, here are the two functions working together to get a random car:

window.addEventListener("DOMContentLoaded", function(){

  // Object properties are accessible as strings when bracket notation ([])
  // is used. By placing the arrays into an object as properties, you give
  // yourself the option to reference those properties as strings later.
  var makes = {
    honda : [ 'civic', 'accord', 'odyssey', 'crv', 'ridgeline' ],
    toyota : [ 'corolla', 'camry', 'sienna', 'avalon']
  };

  // Get reference to DOM <select> and set up an event handler for it
  var vehicleSelect = document.getElementById("vehicles");
  
  // Rather than set the event handler to a named function (which we couldn't 
  // pass custom arguments to since it's an automatically called function), 
  // we'll have the handler be an anonymous wrapper function.
  vehicleSelect.addEventListener('change', function(){
    // Within the wrapper function, we can do whatever we like, including
    // calling other functions with any values we want.
    
    // Call the function that gets the correct array out of the object
    // based on the string value of the select at this moment.
    var result = chooseMake();
    
    // Take the array and pass it to the randomizing function and log the returned
    // random value:
    console.log(randomizeSelection(result));
  });

  // When the select value changes get the array corresponding to the string
  // value of the select  
  function chooseMake() {
    return makes[vehicleSelect.value];
  }
  
  // Take in the selected array and return a specific car from that array
  // based on a random selecton:
  function randomizeSelection(make){
    return make[Math.floor(Math.random() * make.length)];     
  } 
});

<select id="vehicles">
  <option value="honda">Honda</option>
  <option value="toyota">Toyota</option>
</select>

Collectives™ on Stack Overflow

Reference existing arrays from onChange handler

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related