Why isn't my search icon fetching the API?

Question

I added a search Icon to my code, but now I need it to fetch the results in the API. I assigned it an id so I can access it but it's not working. What newbie mistake am I making?

const searchForm = document.querySelector('form');
const searchResultDiv = document.querySelector('.search-result');
const container = document.querySelector('.container');
let searchQuery='';
const searchIcon = document.getElementById('search-icon');

searchForm.addEventListener('submit', (e) => {
    e.preventDefault();
    searchQuery = e.target.querySelector('input').value;
    fetchAPI();
}) 

 searchIcon.addEventListener('click', (search) => {
    searchQuery = search.target.querySelector('input').value;
    fetchAPI();
})

Carsten Massmann · Answer

The snippet below demonstrates how you can assign two event listeners ('click' and 'submit') to the body of the document. The if condition in the callback function turns it into a "delegated" event handling: the action will unfold only if the sIcon element was click-ed or the submit event was triggered (e. g. by hitting the return key after entering text into the input field).

As @DaveNewton remarked in a comment already, you should evaluate the inp.value as late as possible and not communicate it through a global variable but rather as an argument to the fetchAPI() function.

const sIcon = document.getElementById('search-icon'),
  inp=document.querySelector("input");
 
['click','submit'].forEach(ty=>document.body.addEventListener(ty,ev=> {
  ev.preventDefault();
  if(ev.type=='click'&&ev.target==sIcon||ev.type=='submit')
    fetchAPI(inp.value);
}));

function fetchAPI(pat){
 console.log(`fetching data with pattern: ${pat}`);
}

Why isn't my search icon fetching the API?

1 Answers