Does anyone know why disableHeaderButton.click doesn't work here?

Question

Does anyone know why disableHeaderButton.click doesn't work here? Thanks for your help in advance.

P.S. I can send more code if necessary.

 function addContainer(title){
    var con = document.createElement("div"); // container box
    con.setAttribute("class","container");


    var containerHeader = document.createElement("div"); containerHeader.setAttribute("class","container_header");
    var containerTitle = document.createElement("b"); containerTitle.setAttribute("class","container_title"); containerTitle.innerHTML = title;

    var resetHeaderButton = document.createElement("div"); resetHeaderButton.setAttribute("style","margin-right: 30px;"); resetHeaderButton.setAttribute("class","containerHeaderButton");
    resetHeaderButton.innerHTML = `<a href="#" style="color: white; line-height: 2; text-decoration: none;">Reset</a>`

    var disableHeaderButton = document.createElement("div"); disableHeaderButton.setAttribute("id","headerButton"); disableHeaderButton.setAttribute("style","margin-right: 5px;"); disableHeaderButton.setAttribute("class","containerHeaderButton");
    disableHeaderButton.innerHTML = `<a href="#" style="color: red; line-height: 2; text-decoration: none;">Disable</a>`

    containerHeader.appendChild(containerTitle);

    containerHeader.appendChild(resetHeaderButton);
    containerHeader.appendChild(disableHeaderButton);

    con.appendChild(containerHeader);

    con.innerHTML += `<div class="container_line"></div>`;

    document.getElementsByClassName("container_align")[0].appendChild(con); 

    document.addEventListener("DOMContentLoaded", function() {
        disableHeaderButton.onclick = ()=>{  //here is my problem
            console.log("click");         
        };
    })

    containersAsArray.push(new Container(containerTitle,con,resetHeaderButton,disableHeaderButton));
    return new Container(containerTitle,con,resetHeaderButton,disableHeaderButton);
}