estoy un poco atorado con este código y no puedo dar con la solución, lo que quiero hacer es que cuando cargue el dom la funcion "loadWithParameter" sea llamada y genere elementos desde javascript y cargue datos de una rest api. Al finalizar también se crea un input con id "search" para hacer una busqueda de los datos de la rest api, el problema viene que cuando le pongo un evento input para realizar la busqueda me dice que el elemento no esta creado. No logro dar con la solucion. Por parte de html tengo lo siguiente:
<main>
<section id="jokes">
<header>
<h2>Title</h2>
</header>
<article>
<h3>Subtitle</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique iusto repellendus officiis consequuntur inventore neque necessitatibus blanditiis ducimus, fugit eius vitae quis voluptatum reiciendis deserunt quam hic optio dolorem laboriosam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique iusto repellendus officiis consequuntur inventore neque necessitatibus blanditiis ducimus, fugit eius vitae quis voluptatum reiciendis deserunt quam hic optio dolorem laboriosam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique iusto repellendus officiis consequuntur inventore neque necessitatibus blanditiis ducimus, fugit eius vitae quis voluptatum reiciendis deserunt quam hic optio dolorem laboriosam.</p>
</article>
<section class="hidden-section">
<h2>Hello World</h2>
</section>
</section><!-- End Section "#jokes"
--><aside id="repositories-list">
</aside>
</main>
Y del lado de javascript:
document.addEventListener('DOMContentLoaded', function() {
function loadWithParameter(param) {
let config = {
method : 'GET',
url : ' https://api.github.com/search/repositories?q=' + param
}
loadContent(config)
.then(function(data) {
const items = data.items;
let htmlList = `<h2>Javascript repositorie's list</h2><br>`;
htmlList += `<input type="text" id="search" placeholder="Search Repositorie">`;
htmlList += `<ul class="items-list">`;
items.forEach(function(item) {
htmlList += `<li>${item.url}</li>`;
})
htmlList += `<ul>`;
repoList.innerHTML = htmlList;
})
.catch(function(error){
console.log(error);
});
}
//Call function loadWithParameter with 'Javascript' as param
loadWithParameter('Javascript');
const searchInput = document.querySelector('#search');
function hideItems(item){
let itemsList = document.querySelector('.items-list');
console.log(itemsList);
}
searchInput.addEventListener('input', hideItems(this.value));
}); //DOM CONTENT LOADED