How can I call the event of an element that I am declaring in a function in javascript?

Question

How can I call the event of an element that I am declaring in a function in javascript?

Navigation

#1 by (0 votes)

0

I am a bit stuck with this code and I can not find the solution, what I want to do is that when loading the sun the "loadWithParameter" function is called and generates elements from javascript and loads data from a rest api. At the end you also create an input with id "search" to do a search of the data of the rest api, the problem is that when I put an input event to perform the search tells me that the item is not created. I can not find the solution. From html I have the following:

<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>

And on the javascript side:

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

javascript html5 api fetch

asked by Matias 22.10.2018 в 02:32

source

1 answer

How to display buttons in the view of the IOS SWITF4 camera Show Time SQLite Android

score 0 · Accepted Answer

You can specify from the generation of the element the event that you will hear pointing to a previously created method.

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

function myMethod() {

//tu función

}

In this way, when the element is generated, the said event will point to a method.

Because if you do it this way:

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

It will not work because the method of obtaining the data of the api due to ajax is asynchronous so the code where you add the event is executed first, that is, you add the event right now without the element being generated.

Your solution would be:

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

function hideInputs () {

//Hide elements for example

}

Or execute the method where you add the event after the ajax response:

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

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

This after you generate the elements in the ajax.