title: using an addEventListener onclick with api ajax
body: <p>I am in a pickle with this problem.</p>
  
  <p>I have a text area and I want to click on a button to </p>
  
  <ol>
  <li>transform the address text into uppercase</li>
  <li>loop through the data I've acquired from an API and check to see if
  the addresses match up.</li>
  </ol>
  
  <p>I've been working on it for a couple of days searching through <a href="https://stackoverflow.com/questions/3594923/chrome-uncaught-syntaxerror-unexpected-end-of-input">stackoverflow</a> questions and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" rel="nofollow noreferrer">Mozilla docs</a> for answers. I've tried just doing step one and I've been getting Uncaught SyntaxError: Unexpected end of input errors. But I believe my syntax is correct.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form&gt;
         &lt;p&gt;Check to is if street light service has already been requested&lt;/p&gt;&lt;br&gt;
         &lt;input type="text" name="service" id="chiService"&gt;
         &lt;button type="button" id="btn"&gt;Try it&lt;/button&gt;
  </code></pre>
  
  </p>
  
  <pre><code>     &lt;/form&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$.ajax({
  url: "https://data.cityofchicago.org/resource/h5ea-dn36.json",
  type: "GET",
  data: {
    "$limit" : 4,
    "$$app_token" : "APP_TOKEN"
  }
   }).done(function(data) {
  
  
  var el = document.getElementById("btn");
  
  
  function serviceFunction(myData){
   var userStreetAddress = document.getElementById('chiService').value;
   userStreetAddress = userStreetAddress.toUpperCase();
   /*for(var i = 1; i &lt; myData.length; i++){
      if(myData.street_address[i] == userStreetAddress){
           console.log('its working!');
       }
   */} 
     alert(userStreetAddress);
    };
  el.addEventListener("click", serviceFunction(data), false);
  
  
  });//end of ajax function
  </code></pre>