So I have a Google Books API for searching books. I have a searchBar which allows to search books writing any information about them and pass it to function as query:

function searchBook(query){
        const url = BASE_URL + `${query}` + '&' + API_KEY;
    
        fetch(url)
        .then(res => res.json())
        .then(books => showBooks(books.items));
    }

But now I want to make a ul which displays different categories of books, and when I click on one of the li, it displays books of this certain category. Picture with categories ul:

Javascript code for selecting categories when clicking on li:

const list = document.getElementById('list');

        const li = list.querySelectorAll('li');

        for (let i = 0; i < li.length; i++) {
            li[i].addEventListener("click", e =>{
                e.target.innerHTML == "Fiction" ? searchBook('subject:fiction') : console.log('doesnt work');
            })
            
        }

But for some reason nothing happens, books don't display and the console is empty, and there's no errors either.