02-preventDefault()

Calling preventDefault() during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.

preventDefault()

Let's add the preventDefault method in our fetchResults. Note that we took out the console statement from earlier:

function fetchResults(e) {
    e.preventDefault(); //1
    url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value;  
}

Let's analyze this:

1. We add the preventDefault method to make sure that a request isn't actually sent. In other words, even though we tell our code to submit the data, we don't actually want data to be submitted anywhere. This isn't a form where we are signing up for something or filling out data to be saved in a database. That is the default nature of a form element: to submit data, to send a POST request.

Instead, we want to get data. We are using the form to construct our GET request. We are using the form to gather the data for that request.

Experiment

Try taking the preventDefault out. Notice as it disappears momentarily, as the default nature of the form is to try to submit.