Hi, was trying to redo some exercise in Request topic from scratch and found a part of a function that I don’t know how it works and really can’t find an answer to. In the function below, displaySuggestions, it calls the method preventDefault(). What is this function trying to prevent? What is the default action of the event? I try to remove that part and run the code but it didn’t work meaning I need that method to prevent an default action for it to work.
Please see below for the link to all the files to the whole project.
Thanks in advance.
//information to reach API
const dataMuseUrl = 'https://api.datamuse.com/words?’;
const queryParams = ‘rel_jjb=’;
//selecting page elements
const inputField = document.querySelector(’#input’);
const submit = document.querySelector(’#submit’);
const responseField = document.querySelector(’#responseField’);
//AJAX function
const getSuggestions = async () => {
const wordQuery = inputField.value;
const endpoint = ${dataMuseUrl}${queryParams}${wordQuery}
;
try {
const response = await fetch(endpoint);
if (response.ok) {
const jsonResponse = response.json();
renderWordResponse(jsonResponse);
} throw new Error('Request failed!')
}
catch(error) {
console.log(error)
}
}
// clear previous results and display results to webpage
const displaySuggestions = (event) => {
event.preventDefault();
while(responseField.firstChild) {
responseField.removeChild(responseField.firstChild);
}
getSuggestions();
}
submit.addEventListener(‘click’, displaySuggestions);
//link
https://drive.google.com/drive/folders/1dmKLTHtJVh0oNVfliWthypP6E-Ell3T8?usp=sharing