He mostrado algún elemento usando la función Array.map, pero ahora no puedo seleccionar ningún elemento que se cree usando la función Array.map. Cuando selecciono la consola, registro un elemento que se crea usando esa función de mapa, muestra nulo
const fetchData = function() { let display = products.map(function(product) { return `<div class="main relative lg:w-1/4 md:w-1/2 p-4 w-full"> <a class="block relative h-48 rounded overflow-hidden"> <img alt="headphone" class="product--img object-cover object-center w-full h-full block" src=${product.img} /> </a> <div class="mt-4 relative"> <h3 class="category text-gray-500 text-xs tracking-widest title-font mb-1"> ${product.category} </h3> <h2 class="name text-gray-900 title-font text-lg font-medium"> ${product.name} </h2> <p class="price mt-1">${product.price}</p> <button id="name" class="btn-add absolute right-5 bottom-3 bg-orange-400 rounded text-sm px-2 py-2 text-white font-medium" > Add To Cart </button> </div> </div>`; }); display = display.join(""); mainSection.innerHTML = display; }; window.addEventListener("DOMContentLoaded", fetchData); let btnAdd = document.querySelector(".btn-add") console.log(btnAdd)Poner
let btnAdd = document.querySelector(".btn-add") console.log(btnAdd) dentro de fetchData en la parte inferior, cuando el .btn-add ya está creado y agregado al DOM.
Intenta acceder a .btn-add cuando aún no existe, el evento DOMContentLoaded aún no se ha activado. window.addEventListener("DOMContentLoaded", fetchData); aquí solo agrega un oyente, pero no ejecuta, por lo que su HTML en la variable de display aún no existe
Sucede que el método fetchData se llama solo después de que el DOM termina de cargarse, pero la búsqueda del elemento de su botón se realiza incluso antes de que finalice la carga del DOM (y en cualquier caso, el elemento aún no existe y el valor es nulo) Si busca el valor "después" de la carga del DOM, encontrará el elemento