一个按钮的MVC，以实现不同类型的按钮.按钮元素的循环不会显示 div 中的所有元素

Question

我想实现一个按钮的MVC。我创建了一个按钮 var btn = {btnElem : document.createElement('button')} ; 现在我想将此按钮继承为不同类型的按钮，例如Arthimetic或逻辑按钮。所以我用这个btn对象来获取Arthimetic按钮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（'button'） 代替 arthButn.btnElem，它可以正常工作。但在这种方法中，多个元素不会附加到 buttonContainerdiv。按钮正在替换另一个按钮，并且仅显示一个按钮。

另一个问题是我想将事件处理程序附加到其控制器文件上的 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。因此，在循环中，您正在修改同一 DOM 按钮元素的innerHTML，然后将该相同元素附加到容器中。

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

编辑：这个小提琴更好地说明了如何实现继承：https://jsfiddle.net/o52mn65q/。