Link to codepen: https://codepen.io/mdbeauche/pen/RygqNq/
I can’t understand why I’m getting the results that I am. I have a .on() handler for the input text field and for the search button. Both handlers call the exact same function with the exact same input which uses ajax to request data from Wikipedia and then clears the input text field.
If you enter in a search string and click the search button, the ajax request to Wikipedia is valid and returns data, but the text field doesn’t get cleared.
If you enter in a search string and press enter, the ajax request to Wikipedia returns an error, but the text field gets cleared.
Both events call the same function, with the same input. The function outputs the search URL sent in the Wikipedia ajax request to the console, and the URL is identical each time. Why am I getting different behavior (click = successful search but not clearing text field, press enter = unsuccessful search but text field cleared) and how can I fix it?