title: Why does function called inside a function return empty value?
body: <p>I have a function that gets initiated on page load. It is suppose to return a string item from an array/list. I have tested it and it seems to work fine:</p>
  
  <pre><code>function finder(file_list, evt_name) {
    file_list.forEach(function (item, index) {
        if (item.includes(evt_name)){
          console.log(item);
          return item;
        }
    });
  }
  </code></pre>
  
  <p>I have a second function that is triggered by a button click event. Inside this function, I call my first function ('finder'):</p>
  
  <pre><code>document.getElementById("btnGetInterval").onclick = function () {
    ...
    var t_file = finder(tidal_files, event);
    var rv_file = finder(river_files, event);
    var rn_file = finder(rain_files, event);
  ...
  }
  </code></pre>
  
  <p>In the console, when the <code>'finder'</code> function is called, it will <code>console.log(item)'</code> correctly and when it hits the break point it shows that the correct <code>item</code> will be returned, but when it returns inside the button click function, where I am trying to assign the returned value to a variable, it shows as <code>'undefined'</code>. Any reason why this would be happening? Any way to resolve it?  </p>