ilarsona ilarsona - 1 year ago 87
Javascript Question

My event listener is only triggering once, and not even running the code with no errors?

I'm trying to do a very basic if-then code based on a select statement, but it doesn't seem to be working. I've created a event listener as soon as the window loads, but it only seems to be running once based on

statements I've added.

I expect that when I change to a different option in the select, a value will change or a prompt will come up (depending on what's selected). Instead, nothing's happening.

I've also ran my code through JS Hint to try to find small errors, and neither that or Chrome's console is throwing any errors.

I've looked at this answer to try to remember how to get the value of a selected option: Get selected value in dropdown list using JavaScript?

The select code:

<select name="type_of_service" id="type_of_service">
<option selected="selected">Choose one...</option>
<option value="optgroup_1">Every time</option>
<option value="optgroup_2" name="trigger-describe_interval">On an interval...</option>
<option value="optgroup_3">Completely optional</option>

The Javascript function & Event listener:

// The following is a list of event listeners. We need to start it off with a making sure the body has loaded first.

window.addEventListener("load", function () {
console.log("Checkpoint 1");
// Add more listeners here...
var type_of_service = document.getElementById("type_of_service");
type_of_service.addEventListener("change", trigger_describe_interval());
// This funciton is for the selector, with the ID of type_of_service

function trigger_describe_interval() {
console.log("Checkpoint 2");
var selected_object = document.getElementById('type_of_service');
var current_value = selected_object.options[selected_object.selectedIndex].value;
// So now we've aquired the value of the select.
// If the value is optgroup_1, then change the described_interval to 3500 miles
if (current_value == "optgroup_1") {
document.getElementById('described_interval').value = "1";
// Otherwise, if the option is optgroup_2 then ask for an interval
else if (current_value == "optgroup_2") {
// create a prompt varible
var response = prompt("Enter the interval in miles. For example, if you would like this service to be used every 3500 miles, enter '3500'");
// Ensure that this is a integer
if (response !== parseInt(response, 10)) {
// So now it's not a number, tell them that
response = window.alert("Sorry, but \"" + response + "\"is not a valid entry. Please try again. ");
// loop back
// abort this version of the function
return false;

Answer Source

Try removing the parentheses from this function call:

type_of_service.addEventListener("change", trigger_describe_interval());

Like so:

type_of_service.addEventListener("change", trigger_describe_interval);

If you need to pass parameters to the inside function, you could accomplish that by doing the following:

type_of_service.addEventListener("change", function() {
    trigger_describe_interval(param1, param2);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download