0

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

1 respuesta 1

0

Puedes especificar desde la generación del elemento el evento que escuchará apuntando a un método antes creado.

htmlList += `<input type="text" id="search" placeholder="Search Repositorie" onchange="myMethod">`;

function myMethod() {

//tu función

}

De esta forma cuando se genere el elemento ya apuntará a un método el dicho evento.

Porque si lo haces de esta manera:

searchInput.addEventListener('input', hideItems(this.value)); });

No funcionará porque el método de obtener los datos de la api debido ajax es asíncrono por lo que se ejecuta primero el codigo donde agregas el evento es decir ahora mismo agregas el evento sin que se halla generado el elemento.

Tu solución sería:

htmlList += `<input type="text" id="search" placeholder="Search Repositorie" onchange="hideInputs">`;

function hideInputs() {

//Hide elements for example

}

O ejecutar el método donde agregas el evento luego de la respuesta ajax:

const searchInput = document.querySelector('#search');

searchInput.addEventListener('input', hideItems(this.value)); });

Esto luego de que generes los elementos en el ajax.

3
  • Buenas, antes que nada gracias por tu ayuda, recien edité el código porque me olvide de agregar unas ultimas lineas en javascript, con lo que me comentaste quedaria algo asi? Borro: const searchInput = document.querySelector('#search'); y searchInput.addEventListener('input', hideItems(this.value)); Modifico por: htmlList += <input type="text" id="search" placeholder="Search Repositorie" oninput="hideItems(this.value)">;
    – Matias
    el 22 oct. 2018 a las 0:56
  • Buenas editare la respuesta el 22 oct. 2018 a las 0:57
  • Así funcionará también el 22 oct. 2018 a las 1:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.