The onclick handler function closeTab() doesn't work on appended elements.

HTML:

<li id="listid" class="first-tab">
  <img class="cmd-icon" id="cmdicon" src="resources/img/cmd.png">
  <a id="atext">Mozilla Firefox</a> 
  <img onclick="closeTab()" id="deleteTab" class="deleteicon" src="resources/img/delete-icon.svg">
  <img onclick="addTab()" id="addTab" class="addplus" src="resources/img/add.svg">
</li>

JavaScript:

function closeTab() {
    var whereTab = document.getElementById('listid');
    if (whereTab.style.display == 'block') {
        whereTab.style.display = 'none';
    } else {
        whereTab.style.display = "none";
    }
}

function addTab() {
    var img = document.createElement("img");
    img.src = "resources/img/delete-icon.svg";

    var img2 = document.createElement("img");
    img2.src = "resources/img/cmd.png";

    img.className = 'deleteicon';
    img.id = "deletetab";
    img.onclick = closeTab();

    var ulLocation = document.getElementsByClassName('abc')[0];
    var whereTab = document.getElementById('listid');

    var addTab = document.createElement('li');
    addTab.className = 'first-tab';
    addTab.id = "listid";

    addTab.className = 'active';
  
    addTab.innerHTML = "mozilla-firefox/newtab";
    addTab.appendChild(img2);

    ulLocation.appendChild(addTab);

    addTab.appendChild(img);
}

Why doesn't the closeTab() function work on appended items via addTab()?