Estoy tratando de hacer un botón, nombre de clase "originalButton". Cuando hago clic en el botón original, necesita agregar un nuevo botón a la página. ¿Cómo configuro un detector de eventos para cada botón, que dará una salida diferente según la posición del botón?
Por ejemplo, si hago clic en el botón original 100 veces, se agregarán 100 botones nuevos. Si hago clic en el nuevo botón número 1, consola.log "Soy el botón 1". Del mismo modo, si hice clic en el nuevo botón número 100, debe consola.log "Soy el botón 100"
Aquí está el código que he intentado, pero parece que no puedo hacer que funcione. No necesito saber cómo hacer esto sin la ayuda de ningún framework js. Cualquier ayuda será muy apreciada:
const mainButton = document.querySelector('.mainButton'); let i = 1; mainButton.addEventListener('click', () => { const newButton = document.createElement('button'); document.body.append(newButton); newButton.addEventListener('click', () => { console.log(`I am button ${i}`); i= i+1 }) })onButtonClick )i en algún lugar (por ejemplo: conjunto de datos) const mainButton = document.querySelector('.mainButton'); let i = 1; mainButton.addEventListener('click', () => { const newButton = document.createElement('button'); newButton.onclick = onButtonClick; newButton.dataset.id = i; newButton.innerHTML = '#' + i; i++; document.body.append(newButton); }); const onButtonClick = () => { const e = event.target; console.log(`I am button ${e.dataset.id}`); }; <button class='mainButton'>Add Button</button>