I have a search field (input
of type text
) and a search button, as follows:
<div id = 'results-container'>
<input type="text" placeholder="Search..." id="search-bar">
<button type="submit" id="search">Search</button>
</div>
in my HTML. Correspondingly, the JavaScript file looks like this:
const searchButton = document.getElementById('search');
const searchField = document.getElementById('search-bar');
const output = document.getElementById('results-container');
searchButton.addEventListener('click', getSongs);
function getSongs() {
/* do something */
}
where “do something” is effectively to fetch data from the iTunes API and append it to the body of output
(using output.innerHTML += "foo"
).
On reloading a page, the first search attempt runs properly–I enter a value, and click on the search button, and results show up, as expected. However, if I now enter another value into the search bar and press ‘Search’, nothing happens (I think: there are no console logs).
What could possibly be the issue?