Why the onclick event does not work on my li?

Question

I am creating a js plugin to manage tags and I’m looking to make a list of autocompletion from the site tags wordpress "get_tags()".
I can display the suggestions but I can’t select the right one.
The problem is that my "li" listener does not work.
Can someone please help me ?
Here is my full JS code :


let aTags, aTagsRaw, inputValue;

const loadTags = ( $array ) => {
    $array.sort((a, b) => parseFloat( b.count ) - parseFloat( a.count ));
    aTags = $array;
}

const rawTags = ( $array ) => {
    aTagsRaw = $array;
}

window.onload = () => {

    const createTags = ( obj, counter ) => {

        // Define variables

        let $container = document.getElementById( 'enode-area' );
        let $item = document.createElement( 'li' );
        let $link = document.createElement( 'a' );
        let $content = document.createTextNode( obj.name );

        // Add class/attributes

        $item.classList.add( 'enode__item' );
        $link.classList.add( 'enode__item--link' );
        $item.setAttribute( 'key', counter);
        $link.setAttribute( 'href' , ( "https://aqui.e-node.net/etiquettes/" + obj.slug + '/' ) );
        $link.setAttribute( 'data-id', obj.term_id );

        // DOM injection

        $link.appendChild( $content );
        $item.appendChild( $link );
        $container.appendChild( $item );

    };

    // Loop to display current tags

    let counter = 0;

    aTags.forEach( $el => {
        createTags( $el, counter );
        counter++;
    });

    const cleanTags = () => {
        let $tags = document.querySelectorAll('.enode__choice');
        $tags.forEach( $el => {
            $el.remove();
        });
    }

    const listTags = ( obj, counter, e ) => {

        // Define variables
        let $container = document.getElementById( 'list-tags' );
        let $item = document.createElement( 'li' );
        let $content = document.createTextNode( (obj.count) ? "[" + obj.count + "] - " + obj.name : obj.name );

        // Add class/attribute
        $item.classList.add( 'enode__choice' );
        if( !obj.error ) {
            $item.setAttribute( 'key', counter );
        }
        ( !obj.error ) ? $item.value = obj.term_id : $item.setAttribute('error', true);

        // Dom injection
        $item.appendChild( $content );
        $container.appendChild( $item );

    }

    let $searchBar = document.getElementById('input-tags');
    let $tags, $tagsArr, stateBar, slug;
    let results = [];
    
    const updateBar = ( e ) => {

        // Refresh completion
        cleanTags();
        stateBar = e.target.value;
        results = [];

        // Search with slug
        for( let i = 0; i < aTagsRaw.length; i++ ) {
            obj = aTagsRaw[i];
            slug = aTagsRaw[i].slug;
            if( stateBar === slug.substring( 0, stateBar.length )) {
                results.push( obj );
            }
        }

        // Throw error
        if( results.length == 0 ) {
            results.push( {
                name : 'Désolé, aucune étiquette ne correspond à votre recherche...',
                slug : "none",
                error: true
            } );
        }

        // Break loop
        for( let j = 0; j < results.length; j++ ) {
            listTags( results[j], j );
            if( j === 4 ) {
                break;
            }
        }

        Array.prototype.slice.call(document.querySelectorAll('.enode__choice')).map(function(item) {
            item.addEventListener('click', function(e) {
            e.preventDefault();
            console.log("value", e.target.value);
            }, true);
           });
        
    }
    
    const displayList = () => {
        let $panel = document.getElementById('list-tags');
        $panel.classList.toggle('js-is-display');
    }

    $searchBar.addEventListener( "focusin", displayList );
    $searchBar.addEventListener( "focusout", displayList );
    $searchBar.addEventListener( "input", updateBar );

}


Thanks (:

0
FuenCode 2 months 0 Answers 7 views 0

Leave an answer