Почему в моем примере не получается задать button.onclick?

Question

[zanooda]

Вот код:

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");
		// оба закоменченных варианта работают хорошо и по клику я вижу алерт
        // container.addEventListener("click", function() {
        //     alert(objectName + ", " + key);
        // });
        // 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);

        container.innerHTML += " ";

		// Eсли элемент инпут, то не работает тоже
        // 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.type = ""
        button.innerHTML = "Append";
        button.id = objectName + "-" + key + "-button";

        //button.onclick = "push()"; // Doesn't work
        //button.addEventListener("click", push, false);
        // button.addEventListener("click", function() {
        //     alert('yo yo Yooo');
        // });
        // button.onclick = function() {
        //     alert('Yo ho ho!');
        // }
        button.onclick = function() {
            alert('Yo ho ho!');
        }
        // вот тут, все это не работат, хотя для элемента container выше, все ок и по клику я вижу алерт

        container.appendChild(button);

        container.innerHTML += "<br />";

        object[key].forEach((element, index)=> {
            let span = document.createElement("span");
            span.contentEditable = "true";
            span.innerHTML = element;
			
			// тут тоже не удается прикрипить онклик, хочу понять почему
            // span.onclick = function() {
            //     alert('io')
            // }
            span.addEventListener("click", function() {
                alert('ioio')
            }); 

            container.appendChild(span);
            
            let x = document.createElement("a");
            x.className = "x";
            x.href = "javascript:remove('" + objectName + "', '" + key + "', '" + index + "')";
            x.innerHTML = "<sup>×</sup>";
            container.appendChild(x);
            
            container.innerHTML += " ";
        });
        
        container.innerHTML += "<br /><br />";

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

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

// если после всего пройти по всем кнопкам и установить листенеры то все ок, они работают. 
// то есть если то что ниже разкоментить то оно выполнятся корректно
// let collection = document.getElementsByTagName("button");
// for (let index = 0; index < collection.length; index++) {
//     let element = collection[index];
//     element.addEventListener("click", function() {
//         alert("Noo");
//     });
// }

// Вот эта кнопка работает. И тут button.onclick устанавливается а выше, почему то нет. ПОЧЕМУ?
let button = document.createElement("button");
button.innerHTML = "button";
button.onclick = function() {
    alert("button");
}
document.getElementsByTagName("body")[0].appendChild(button);

cорс: github.com/zanoooda/text-generator
пример: zanoooda.github.io/text-generator

Хочу понять почему я немогу установить button.onclick внутри форича. Помогите мне! как нибудь решить проблему могу, например задать листенеры внутри фора, как тут:

// let collection = document.getElementsByTagName("button");
// for (let index = 0; index < collection.length; index++) {
//     let element = collection[index];
//     element.addEventListener("click", function() {
//         alert("Noo");
//     });
// }

но я все таки хочу понять почему не работает. Спасибо.

Comments

[Vladimir]

а как скрипт узнает что Вы щёлкнули по именно тому span'у или по button'у?
Вообще плохая идея использовать в названиях переменных для создаваемых элементов названия тегов. Лучше придумывать свои ;)

[zanooda]

Vladimir, возможно. Но это не причина. Я кстати пробовал переименновать в b и проверить что будет. Все то же

Answer 1

[Антон Спирин]

container.innerHTML += "<br />";
Во время этого вызова происходит преобразование innerHTML в строку, конкатенация, удаление всех потомков узла container, анализ получившейся строки и создание новых элементов-потомков.
Так как все элементы узла container заменяются новыми, то слушатели, которые вы вешали на потомков узла до вызова, естественно, не сохраняются.
Можно заменить на:

var br = document.createElement('br');      
container.appendChild(br);

Comments

[zanooda]

Я люблю тебя! Спасибо, я вчера уснуть не мог (:

[Никита Егоров]

zanooda, не забывайте про существование chrome devTools