Quería saber si hay alguna manera de acceder a un elemento que se creó a partir de una función. Estoy tratando de establecer un evento de clic para cada elemento creado, pero no puedo hacerlo funcionar. Gracias de antemano
function createDuck() { let newDuck = document.createElement("div"); newDuck.classList.add("duck"); randomPosition(newDuck); body.appendChild(newDuck); return newDuck; }; const ducks = document.querySelectorAll("duck"); ducks.forEach(function (item) { item.addEventListener("click", () => { item.classList.add("shot"); }); });La siguiente solución agrega un detector de eventos al elemento <div> creado dinámicamente con el estilo de clase .duck aplicado.
let body = document.getElementsByTagName("body")[0]; let button = document.getElementById('create'); let ducks = document.querySelectorAll("duck"); let counter = 0; /* This function is used to create a new item. */ function createDuck() { let newDuck = document.createElement("div"); newDuck.innerHTML = counter++; newDuck.classList.add("duck"); body.appendChild(newDuck); return newDuck; }; /* This method checks if the element applies a class style. */ function hasClass(elem, className) { return elem.className.split(' ').indexOf(className) > -1; } /* This event listener triggers new item creation. */ button.addEventListener('click', function() { createDuck(); }); /* The following item adds an event listener to the dynamically created item. */ document.addEventListener('click', function (e) { if(hasClass(e.target, 'duck')) { e.target.classList.add('shot'); } }, false); .duck { color: red; border: 1px solid blue; margin-top: 10px; cursor: pointer; } .shot { background-color: yellow; } <body> <button id="create">Create</button> </body>Llamas a "createDuck ()" en ninguna parte. Después de llamarlo, el elemento estará disponible.