MVC кнопки для реализации различных типов кнопок. Цикл элемента button не отображает все элементы в div

Question

Я хочу реализовать MVC кнопки. Я создал кнопку, используя var btn = {btnElem : document.createElement('button')} ; Теперь я хочу наследовать эту кнопку в различные типы кнопок, таких как артеметическая или логическая кнопка. так что я использовал этот объект btn, чтобы получить кнопку артемика var parent = Object.create(btn); var arthButn = {btnElem : parent.btnElem}; , Теперь я хочу отображать циклы arthButn от 0 до 9 чисел. Но это показывает только одну кнопку.

    buttonContainer = document.createElement('div');

for(var i=0;i<10;i++){
arthButn.btnElem.innerHTML = i;
buttonContainer.appendChild(arthButn.btnElem);
}

Если я использую document.createElement('button') вместо arthButn.btnElem, он работает нормально. Но в этом подходе несколько элементов не добавляются в div buttonContainer. Кнопки заменяют одну на другую, и отображается только одна кнопка.

Другая проблема заключается в том, что я хочу добавить обработчик событий к arthbtn в его файле контроллера. Так как решить эту проблему.

Answer 1

Проблема в том, что вы не создаете 10 элементов кнопки, как вы ожидаете, вы создаете только один.

При создании базового объекта-прототипа

var btn = { btnElem: document.createElement('button') }
var parent = Object.create(btn);

Вы создаете один элемент DOM. Затем вы создаете объект, который использует btn объект как прототип

var arthBtn = { btnElem: parent.btnElem }

Обратите внимание, что arthBtn.btnElem равно parent.btnElem который равен btn.btnElem по ссылке. Итак, в вашем цикле, вы модифицируете innerHTML того же элемента кнопки DOM, а затем добавив этот же элемент в контейнер.

Вот возможное решение: https://jsfiddle.net/oz0ppkm5/. Вместо того, чтобы иметь свойство prototype, используйте метод prototype, который возвращает новый элемент DOM каждый раз, когда он вызывается.

РЕДАКТИРОВАТЬ: Эта скрипка лучше иллюстрирует, как вы могли бы достичь наследования: https://jsfiddle.net/o52mn65q/.