Passing a value from a dropdown to eventListner

Question

So I'm using AMCharts and I am trying to change the dataset from one set of data to another.

I'm using EventListner to call my function.

So in my html I have the following:

 <select id="data">
    <option value="set1">Institutional Design</option>
  <option value="set2">Effective </option>
  </select>

In my Javascript I have the following:

document.getElementById("data").addEventListener("change", selectDataset);


      function selectDataset(set) {
        var x = document.getElementById("data");
  x.value = data[set];
}

   // Add data
chart.data = data.set1;

So when the chart first loads it adds data.set1 as the chart data by default. When I change it to Effectiveness (set2) all of the lines disappear. Obviously I'm not passing on the value here.

Here is the Codepen: https://codepen.io/shopmaster/pen/GRZaewZ

Answer 1

I believe event listeners automatically pass the event to the function, but selectDataset() is expecting an option value. Your variable set is actually the event, so you'll need to get the actual value out of the event's target.

Answer 2

Ok, so I figured it out.

I needed to grab the value which I wasn't doing so here is how it should look:

document.getElementById("data").addEventListener("change", selectDataset);


      function selectDataset(set) {
        var set = document.getElementById("data").value;
  chart.data = data[set];
}