function createTimer(countdownObject) { let id = countdownObject.Id let removeClass = "inline remove" //(isRemoveButtonsEnabled && "inline remove") || "inline remove hidden" document.getElementById("countdownList").innerHTML += ` <dt id = "` + id + `" class = "countdown"> <h2 id = "` + id + `-title" class="title">Example Timer</h2> <h3 id = "` + id + `-daysNum" class = "time inline"></h3> <h3 id = "` + id + `-daysDesc" class = "time description inline">days</h3> <h3 id = "` + id + `-hoursNum" class = "time inline"></h3> <h3 id = "` + id + `-hoursDesc" class = "time description inline">hours</h3> <h3 id = "` + id + `-minsNum" class = "time inline"></h3> <h3 id = "` + id + `-minsDesc" class = "time description inline">minutes</h3> <h3 id = "` + id + `-secsNum" class = "time inline"></h3> <h3 id = "` + id + `-secsDesc" class = "time description inline">seconds</h3> <br> <input type="button" value="Delete" id = "` + id + `-remove" class="` + removeClass + `"></button> </dt> ` const removeButton = document.getElementById(id + "-remove") console.log(removeButton) updateTimer(countdownObject) removeButton.onclick = function () { removeTimer(id) }() } function removeTimer(id) { for (let i = 0; i < countdowns.length; i++) { if (countdowns[i].Id == id) { countdowns.splice(i, 1) } } document.getElementById(id).remove() console.log(countdowns) saveCountdowns() }

Estoy tratando de crear este widget de cuenta regresiva. Estoy ejecutando esta función en un bucle for básico e ingresando un objeto de countdownObject con las teclas Name , End e Id . Hay un problema que solo permite que funcione uno de los botones a la vez (generalmente el último creado) y no tengo idea de por qué. La función removeTimer funciona perfectamente, es solo un problema de que todos los botones no se conectan al evento onclick .

Visual