HTML/JavaScript: calling a function with drop-down options?

Question

I'm trying to figure out the correct syntax for calling a Javascript function when a certain option is selected in an HTML drop-down menu.

This is the HTML segment of my menu:

<select id="change_chart" onChange="drawStuff()">
 <option value="1" selected>livejournal</option>
 <option value="2">librarybooks</option>
 <option value="3">sunspots</option>
</select>

And this is my Javascript:

function drawStuff() {
 var menu = document.getElementById("change_chart");
 var selected = menu.addEventListener("change", generateData);
 function generateData(event){
 if (menu.value == '1') {
 //do something
 }
 else if (menu.value == '2') {
 //do something
 }
 else if (menu.value == '3') {
 //do something
 }
 };
};

I'm new to event-driven programming so I have no idea if any of this is right. Anyone have any ideas?

• Charlie L: So one thing I want to mention here, is that you're adding a new event listener everytime the drawStuff function runs. So each time you change the input, you'll register a new event listener. This will slow down your site if someone were to keep changing the option.

Answer 1

Your current code doesn't work properly because the inline onChange="drawStuff()" is defining an event handler that calls that function. So far, so good. But then drawStuff() itself defines a second event handler and attaches it with addEventListener(), so the generateData() part won't run until the second change event on that element. (Then on the third change event it would attach another handler, etc.) You want one method or the other, not both:

var menu = document.getElementById("change_chart");
menu.addEventListener("change", generateData);
function generateData(event) {
 if (menu.value == '1') {
 alert(1);
 } else if (menu.value == '2') {
 alert(2);
 } else if (menu.value == '3') {
 alert(3);
 }
}

<select id="change_chart">
 <option value="1" selected>livejournal</option>
 <option value="2">librarybooks</option>
 <option value="3">sunspots</option>
</select>

If you do it as shown above, the JavaScript would need to be included in a <script> element that is after the <select> element, and/or wrapped in a DOMContentReady on window.onload handler.

Here's how it should look if you want to use the inline onChange handler in your HTML - note that it passes this as an argument to the function, then within the function that is a reference to the element:

function drawStuff(menu) {
 if (menu.value == '1') {
 //do something
 alert(1)
 } else if (menu.value == '2') {
 //do something
 alert(2)
 } else if (menu.value == '3') {
 //do something
 alert(3)
 }
}

<select id="change_chart" onchange="drawStuff(this)">
 <option value="1" selected>livejournal</option>
 <option value="2">librarybooks</option>
 <option value="3">sunspots</option>
</select>

P.S. The first way, with addEventListener(), is generally the preferred way to do it these days.

• Alyssa June: That makes so much more sense. Thanks!