为什么在我的示例中，我无法在前面板中设置button.onclick？

Question

这是示例。我想了解为什么我无法设置button.onclick foreach内？

function render(object) {
    let objectName = object == lexicon ? "lexicon" : "rules";
    document.getElementById(objectName + '-list').innerHTML = "";

    Object.keys(object).forEach(function(key) {
        let container = document.createElement("div");
        // two commnted options works well and onclick I see an alert
        // container.onclick = function() {
        //     alert(objectName + ", " + key);
        // }
        container.id = objectName + "-" + key + "-container";

        let input = document.createElement("input");
        input.type = "text";
        input.placeholder = key;
        input.id = objectName + "-" + key + "-input";
        container.appendChild(input);

        // if element will be input (not button) it also doesn't work
        // let button = document.createElement("input");
        // button.type = "button";
        // button.value = "Append";
        // button.id = objectName + "-" + key + "-button";

        let button = document.createElement("button");
        //button.type = "button"; Можно добавлять или не добавлять все равно не работает
        button.innerHTML = "Append";
        button.id = objectName + "-" + key + "-button";

        //button.addEventListener("click", push, false); // Doesn't work
        // button.addEventListener("click", function() {
        //     alert('yo yo Yooo');
        // });
        button.onclick = function() {
            alert('Yo ho ho!');
        }
        // HERE! HERE INTERESTING! Why here button.onclick doesn't works but for a div it is?

        container.appendChild(button);

        object[key].forEach((element, index)=> {
            let span = document.createElement("span");
            span.contentEditable = "true";
            span.innerHTML = element;

            // here also doesn't work, but here I don't need, here I will need onedit event or something
            // span.onclick = function() {
            //     alert('io')
            // }
            span.addEventListener("click", function() {
                alert('ioio')
            }); 

            container.appendChild(span);
            container.innerHTML += " ";
        });

      document.getElementById(objectName + '-list').appendChild(container);
    });
}

// Init
render(lexicon);
render(rules);

// if I'am trying to set button.onclick out of the foreach all is works fine
// let collection = document.getElementsByTagName("button");
// for (let index = 0; index < collection.length; index++) {
//     let element = collection[index];
//     element.addEventListener("click", function() {
//         alert("Noo");
//     });
// }

// This button works well. I can set here onclick and all works fine. Why I can't do it inside foreach?
let button = document.createElement("button");
button.innerHTML = "button";
button.onclick = function() {
    alert("button");
}
document.getElementsByTagName("body")[0].appendChild(button);

来源：https://github.com/zanoooda/text-generator 示例：https://zanoooda.github.io/text-generator/

我想了解为什么我不能设置button.onclick foreach内部？对于div，我可以。所以我可以将按钮包装在div中并设置onclick，但是为​​什么不能在foreach中设置button.onclick呢？