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

Question

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

buttonContainer = document.createElement('div'); 

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

Если я использую ('кнопка') document.createElement вместо arthButn.btnElem он работает отлично. Но при таком подходе множественные элементы не добавляются к элементу 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 используйте метод прототипа, который возвращает новый элемент DOM каждый раз, когда он вызывается.

EDIT: Эта скрипка лучше иллюстрирует, как вы могли бы достичь наследования: https://jsfiddle.net/o52mn65q/.