Hola chicos y gracias por la ayuda. compileDescription aquí hay una función que llamé para crear la página de descripción de un comercio electrónico. Recibí los productos pasados como argumento de una api, los deconstruí y funcionan. El problema principal es que pasé los detalles del producto coincidente en la descripción y los inserté en el DOM HTML dentro de un detector de eventos . Sin embargo, necesito manipular los datos que inserté en el DOM dentro del detector de eventos dentro de otra función. Para eso, la variable de description debe ser accesible fuera del detector de eventos, pero incluso iniciar sesión en la consola dentro de la función compileDescription pero fuera del detector de eventos devuelve una cadena vacía. ¿Cómo hago para que los valores de la description sean accesibles tanto fuera del detector de eventos como fuera de la función compileDescription o en el ámbito global?

 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 }