javascript - 按钮的MVC实现不同类型的按钮。按钮元素的循环不会显示div中的所有元素

Question

我想实现按钮的MVC。我使用创建了一个按钮 var btn = {btnElem : document.createElement('button')} ;现在我想将此按钮继承为不同类型的按钮，例如算术按钮或逻辑按钮。所以我使用这个 btn 对象来获取 arthimetic 按钮 varparent = Object.create(btn);
var arthButn = {btnElem : 父级.btnElem};
。现在我想显示从 0-9 数字循环的 athButn 。但它只显示一个按钮。

    buttonContainer = document.createElement('div');

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

如果我使用 document.createElement('button') 代替 arthButn.btnElem ，它可以正常工作。但在这种方法中，多个元素不会附加到 ButtonContainer div 中。按钮正在替换一个另一个按钮，并且仅显示一个按钮。

另一个问题是我想将事件处理程序附加到其 Controller 文件上的 arthbtn 中。那么如何解决这个问题。

Answer 1

问题是您没有像您期望的那样创建 10 个按钮元素，您只创建了一个。

当您创建基本原型(prototype)对象时

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

您创建了一个 DOM 元素。然后创建一个使用 btn 对象作为原型(prototype)的对象

var arthBtn = { btnElem: parent.btnElem }

请注意，arthBtn.btnElem 等于 parent.btnElem，通过引用等于 btn.btnElem。因此，在循环中，您将修改同一 DOM 按钮元素的 innerHTML，然后将同一元素附加到容器。

这是一个可能的解决方案:https://jsfiddle.net/oz0ppkm5/ 。不要使用原型(prototype)属性，而是使用原型(prototype)方法，该方法每次调用时都会返回一个新的 DOM 元素。

编辑:这个 fiddle 更好地说明了如何实现继承:https://jsfiddle.net/o52mn65q/ .