Hello guys and thanks for the help. compileDescription here is a function I called in order to create the description page of an ecommerce. I received the products passed as an argument from an api, deconstructed them and they work. The main problem is that I passed the details of the matching product into the description and inserted them into the HTML DOM within an event listener. However, I need to manipulate the data I inserted into the DOM within the event listener within another function. For that, the description variable needs to be accessible outside the event listener, but even logging it into the console within the compileDescription function but outside the event listener returns an empty string. How do I make the values of description accessible both outside the event listener and outside the compileDescription function or in the global scope?

    compileDescription(products){
        const eyeView = [...document.querySelectorAll('.view')]; //returns 16 buttons
        let description = '';
        
        eyeView.forEach(viewBtn=>{
        viewBtn.addEventListener('click', (event)=>{
        const btnId = event.target.dataset.class; //works and returns the ID
        const productFind = products.find(product=> product.id == btnId);  //returns an object with different properties and values
        description += `
            <article class="overDescription">
                <div class="descrContainer">
                    <div class="thisImage"> <img src="${productFind.image}" alt="">
                    </div>
                    <div class="productdetails">
                        <p class="prodescription">
                        ${productFind.description}
                        </p>
                        <h5 class="price"> #${productFind.price}</h5>
                        <button class="bag-btn" data-id= "${productFind.id}">
                            <img src="./images/icons8_add_shopping_cart_100px.png" 
                            width="16px" max-width= "18px" alt="add to cart"/>
                            Add to cart
                        </button>
                    </div>
                </div>
            </article>
        `

        showDescription.innerHTML = description; //the page displays correctly with all its necessary features
        }) 
        })
        
        console.log(description); //returns an empty string
    }