Para HTML, solo tengo un div simple con una clase 'works' y quiero generar una lista de tarjetas dinámicamente. Por ahora, puedo acceder fácilmente a otras clases usando selectores en javascript, pero no puedo seleccionar la clase que tengo en la función javascript. ¿Qué puedo hacer para solucionar este problema?
const handleGetJson = () => { const work = document.getElementById('works'); fetch(`data.json`, { headers: { 'Content-Type': 'application/json', Accept: 'application/json', }, }) .then((response) => response.json()) .then((messages) => { const data = Object.values(messages); let container = ''; data.forEach((item) => { const { title, description, technologies, image, link, linkText, link2, linkText2, id, } = item; const techno = Object.values(technologies); container = container + ` <div class="card-${id}"> <div class="card-1-2"> <div class="image-container${id}"></div> </div> <div class="card-1-1"> <h2 class="titre">${title}</h2> <ul> <li class="cano">CANOPY</li> <li class="dot empty"></li> <li class="dot">Back End Dev</li> <li class="dot empty"></li> <li class="dot">2015</li> </ul> <p class="desc"> ${description} </p> <ul class="skills"> <li>${techno[0]}</li> <li>${techno[1]}</li> <li>${techno[2]}</li> <li>${techno[3]}</li> </ul> <button type="button" class="btn-tonic">See project</button> </div> </div> `; work.innerHTML = container; }); }); }; handleGetJson(); // pop up modal const close = document.getElementsByClassName('close-modal')[0]; const modal = document.getElementById('popup'); const btn = document.querySelectorAll('.btn-tonic'); // unable to get all the buttons in the dynamically generated cards get all buttons console.log(btn); // empty Nodelist // HTML CODES <section id="works" class="works"></section>