TamperMonkey EventListener on button not working

Question

I created this snippet:

function addClick(button, container) {
    console.log("In add click");
    const data = container.nextElementSibling.childNodes[0].innerHTML;
    button.addEventListener('click', ()=>{
        alert('clicked')
        console.log("Clicked");
    })
}

function createCopyButtons(array){
    array.forEach(element => {

        const container = document.createElement('div');
        const button = document.createElement('button');

        button.innerHTML = "Copy"
        
        styleContainer(container);
        styleButton(button, element);
        stylePrevious(element);
        
        container.innerHTML = element.outerHTML + button.outerHTML;

        element.parentNode.replaceChild(container, element);

        addClick(button, container); 

    });
}

Now in here the array is the array of DOM elements I want this property to apply and I call the createCopyButtons() function down with some more stuff. Now the thing is that this event listener does not apply or does not work. I tried to wait till the document is loaded by these answers and only then apply my javascript snippet but the event listener doesn't seems to work.

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

if (document.readyState == "complete") {
     // document is ready. Do your stuff here
   }

Please help.

Answer 1

update:

function addClick(button) {
    button.addEventListener('click', ()=>{
        console.log("Clicked");
    })
}

let p = document.querySelectorAll('p');

// innerHTML not work
let btn1 = document.createElement('button');
btn1.innerHTML = "Not work";
p[0].innerHTML = btn1.outerHTML;
addClick(btn1)

// work
let btn2 = document.createElement('button');
btn2.innerHTML = "work";
p[1].appendChild(btn2);
addClick(btn2)

<p></p>
<p></p>

---

because you append the button to the container using string (.innerHTML) not DOM or using appendChild()

container.innerHTML = element.outerHTML + button.outerHTML

the following function will not apply the event

addClick(button, container);

I don't know why you need to wrap target element and the button inside div, why not just append the button after target element using or insertBefore() or insertAdjacentHTML() but below is working code that follow yours.

it find the button inside the container for using as addClick() parameters

function addClick(button, container) {
  console.log("In add click");
  const data = container.nextElementSibling.childNodes[0].innerHTML;

  button.addEventListener('click', () => {
    alert('clicked')
    console.log("Clicked");
  })
}

function createCopyButtons(array) {
  array.forEach(element => {

    const container = document.createElement('div');
    let button = document.createElement('button');

    button.innerHTML = "Copy"

    container.innerHTML = element.outerHTML + button.outerHTML;

    element.parentNode.replaceChild(container, element);

    let btn = container.querySelector('button'); // <== find the button
    addClick(btn, btn.parentNode);

  });
}
createCopyButtons(document.querySelectorAll('input'))

<div>
  <input type="text">
  <p><span>test</span></p>
</div>