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

Question

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 console.log 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>
                </select>

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
      trigger_describe_interval();
      // abort this version of the function
      return false;
    }
  }
}

This question could be improved by adding the pertinent code to the question itself, not just a link to someplace that may not exist later. — scrappedcola, Jul 29 '16 at 20:35
Also, the problem is this `type_of_service.addEventListener("change", trigger_describe_interval());`, it should be `type_of_service.addEventListener("change", trigger_describe_interval);` — imtheman, Jul 29 '16 at 20:36

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

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);
});

EDIT: Credit to imtheman in the comments above, who also mentioned removing the parentheses just prior to my answer.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 29 '16 at 20:38

Tyler Roper

21,445
6
33
56

So if I wanted to pass variables to this function with an event listener, it's impossible? – ilarsona Jul 29 '16 at 20:39
2

@ilarsona: You could do this: `abc.addEventListener("change", function() {myFunction(param1, param2)});` – Tyler Roper Jul 29 '16 at 20:40
Glad I could help! – Tyler Roper Jul 29 '16 at 20:42
Not that I'm suggesting you do this, but another way to accomplish that would be `abc.addEventListener("change", myFunction.bind(this, param1, param2))`. Just something neat to know about, I'd still suggest doing it @TylerRoper 's way. – Weston Jul 29 '16 at 20:45
This answer was mentioned by @imtheman in the comments (below on the question post) – Mehdi Dehghani Jul 29 '16 at 20:46
@MehdiDehghani Ah I hadn't even seen that, he posted his answer just before I had. I'm somewhat new to this site, is there some form of etiquette or action I should be taking in regards to this? – Tyler Roper Jul 29 '16 at 20:48
Maybe you should mention his name on your answer, – Mehdi Dehghani Jul 29 '16 at 20:53
@MehdiDehghani Good suggestion. I've edited my answer. – Tyler Roper Jul 29 '16 at 20:58

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

1 Answers1